이번 글에서는 Tailwind CSS를 알려드리고자 합니다 🙂
먼저 간단하게 설명하자면,
인라인 스타일을 사용하는 것만큼 쉽고 빠르게 스타일링을 할 수 있고 디자인 시스템만큼이나 일괄된 디자인을 가능하게 해주는 CSS 프레임워크랍니다 :)
🌈 Intro.
Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크입니다.
부트스트랩과 비슷하게 p-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링 할 수 있습니다.
<button class="p-2 shadow-md text-black bg-red-600"> Hello Tailwind </button>
👍🏻 Tailwind CSS 장점
Utility-First의 편리함 그리고 빠른 개발
Tailwind의 Utility-First 컨셉은 원하는 디자인을 매우 쉽고 빠르게 개발할 수 있게 해준다.
HTML 코드 안에 스타일 코드가 포함되어 있기 때문에 HTML과 CSS 파일을 별도로 관리할 필요가 없습니다.
즉, HTML~CSS를 번갈아가며 개발할 필요가 없기 때문에 그만큼 더 편리하고 불필요한 시간을 줄일 수 있습니다.
또한 변경하고자 하는 태그의 스타일을 일일이 클래스명을 검색해가며 필요한 CSS 코드를 찾을 수고도 사라집니다.
마지막으로 랩핑하는 태그의 클래스명을 고민하는 수고도 사라집니다.
이에 관해 여러 방법론이 나올 정도로 클래스명을 짓는 일은 생각보다 까다롭고 어렵게 규칙을 잘 정하여도 그다지 효율적이지 않은 경우가 많습니다.
하지만 Tailwind CSS를 사용한다면 태그의 클래스명을 정하고 사용할 일이 많이 없기 때문에 container, wrapper와 같은 클래스명을 고민할 시간을 절약할 수 있습니다.
결론은 위와 같은 이유들로 보다 시간을 절약해가며 빠른 개발이 가능합니다.
🎨 일괄된 디자인
Tailwind는 색상이나 간격, 사이즈 등등 다양한 유틸리티 클래스가 정해져있어 모든 곳에서 동일하게 사용이 가능해 일관된 스타일로 디자인을 구현하기가 더욱 쉽습니다.
⌨ 커스텀이 쉽고 자유롭다
Tailwind CSS는 다른 여러 프레임워크들과 비교해서 더욱 기본 스타일 값을 세세한 부분까지 쉽게 커스텀이 가능합니다.
커스텀을 할 때 그저 기본 스타일 값을 수정하는 방식이기 때문에 디자인의 일관성에도 영향을 끼치지 않습니다.
덕분에 디자인 시스템이나 다크 모드를 구현하기에도 간편합니다.
로우 레벨의 스타일 제공
CSS 요소 수준의 각 유틸리티 클래스를 제공하기 때문에 보다 섬세하게 원하는 디자인을 구현할 수 있습니다.
로우 레벨의 스타일을 제공한다는 말은 대부분의 스타일 유틸리티 클래스를 알아야 한다는 말과도 같은데 이러한 불편함을 해결하기 위해 Intelli Sense 플러그인을 제공하고 있습니다.
- 자동완성, 미리 보기, 하이라이팅 등을 지원해 주기 때문에 사용법에 익숙해진다면 문서에 의존하지 않고도 개발할 수 있습니다.
JavaScript... 이젠 안녕👋🏻
Tailwind CSS는 JavaScript 코드와 완전히 분리되어 있습니다.
- 그렇기 때문에 프로젝트를 진행하는 도중 JavaScript 프레임워크를 변경한다 해도 별도로 큰 추가 작업 없이 기존의 HTML 코드를 그대로 사용할 수 있습니다.
👎🏻 Tailwind CSS 단점
편리하고 빠르지만 못생긴 코드
<div
class="bg-black text-bold text-white inline-flex items-center p-10 rounded shdow-md">
예쁘지 않은 코드
</div>
- 가장 눈에 보이는 단점은 코드가 못생겼다는 점입니다. 이는 tailwind에 가장 큰 단점이 아닐까 싶습니다.
사람에 따라서 직관적이라고 할 수 있겠지만 그렇다고 예쁘다고 말하기는 어려워 보입니다.
📖 초반 높은 문서 의존도
처음에는 스타일들의 각 클래스명을 익히느라 개발하는 동안 자주 문서를 참고해야 하는 번거로움이 있습니다.
하지만 대부분의 클래스명이 기존 CSS 속성이나 속성값과 비슷하고 자동완성을 지원하는 Intelli Sense 플러그인이 있기 문에 짧은 시간에 쉽게 익숙해질 수 있어 큰 단점은 아니라고 생각합니다.
HTML과 CSS의 혼재
Tailwind 에서는 HTML과 CSS의 분리가 이루어지지 않습니다.
- Tailwind의 단점을 말할 때 HTML과 CSS의 분리가 이루어지지 않았다고 언급되는 경우가 있습니다. 사용자에 따라서는 불편함을 느낄 수 있겠지만 개인적으로는 크게 단점이라고 생각하지 않는 문제입니다.
🍀 마치며
글을 읽어주셔서 감사드리며 Tailwind CSS 사용하기는 공식 문서를 참고해 주세요 😄
