Tailwind CSS는 유틸리티 퍼스트(Utility-First) 접근 방식을 사용하는 CSS 프레임워크로, 미리 정의된 클래스들을 조합하여 빠르게 스타일링할 수 있도록 도와준다.
특징
Utility First
bg-blue-500, text-xl, p-4 등 의미 있는 개별 클래스를 조합하여 원하는 스타일을 적용할 수 있다.
전통적 CSS방식처럼 .css 파일을 작성하지 않아도 된다.
반응형 디자인 지원
sm, md, lg, xl 등 접두사를 지원하여, 화면 크기에 따라 다른 스타일을 적용 할 수 있다.
Just In Time 컴파일러
사용된 클래스만 포함하여 CSS파일을 생성하여 성능을 최적화 할 수 있다.
새로운 스타일을 빠르게 적용 할 수 있다.
테마 설정 가능(쉬운 커스텀)
dark 프리픽스를 사용하여 다크모드를 쉽게 사용 할 수 있다.
다른 프레임워크에 비해 기본 스타일을 상세하게 커스텀 할 수 있고, 기본 스타일 값을 수정하기 때문에 디자인의 일관성을 해치지 않는다.
단점
러닝커브
CSS를 기반으로 만들어졌지만, tailwind의 유틸리티 클래스가 많아 익히는데 시간이 걸릴 수 있다.
Javascript 사용 불가(동적스타일의 어려움)
styled-components와 같이 변수값에 따라 동적으로 css를 설정하는데에 어려움이 있다.
emotion의 기능을 함께 사용하도록 도와주는 Twin.Macro 를 사용하면 둘을 동시에 사용 할 수 있다.
코드의 가독성
수많은 class명으로 인해 가독성이 떨어지고, 스타일 수정 등의 유지보수시 어려움이 발생 할 수 있다.
자주 함께 사용하는 스타일을 묶어 플러그인으로 만들어 관리 할 수 있다.
Bootstrap과 비교
Bootstarp또한 class로 스타일을 수정 할 수 있다는 점에서 유사하나 여러 차이가 있다.
tailwind는 유틸리티 클래스를 조합하여 디자인하며, 사용자의 커스텀이 자유로운 편이다.
bootstrap은 미리 정의된 컴포넌트를 사용하여, 상대적으로 커스텀에 제약이 있다.
tailwind는 jit를 적용하면 사용한 클래스만을 css에 포함하지만 bootstrap은 전체 스타일시트를 포함하기 때문에 크기에 큰 차이가 발생한다.
따라서 이미 디자인된 UI 프레임워크(Bootstrap, MUI 등)를 사용하여 기본 컴포넌트를 사용해야 하는 경우에는 맞지 않다.
빠르게 프로토타입을 만들거나, 커스텀 디자인이 많이 필요한 경우에 적합하다.
