이미지 출처 : https://getlogovector.com/tailwind-css-logo-vector-svg/
Tailwind CSS 란?
많은 유틸리티(utility) 클래스로 이루어진 CSS 프레임워크입니다. Tailwind가 제공하는 유틸리티 클래스들을 다양하게 조합하면 추가적인 CSS 코드 작성없이 단순히 HTML 요소의 class속성에 설정해주는 것만으로도 스타일링이 가능하게 됩니다.
CSS의 속성들을 클래스에 직관적으로 표현함으로써 효율적으로 사용할 수 있게 됩니다.
스타일링에 필요한 대부분의 속성들이 클래스 형태로 사전에 정의되어 있고 사용자는 클래스들을 조합해서 사용하면 됩니다.
여기서 유틸리티 클래스란 딱 한 가지 일만 하는 매우 적은 양의 CSS 코드를 담고 있는 클래스를 뜻하는데요. 보통 유틸리티 클래스를 단독으로 쓰기 보다는 여러 개의 유틸리티 클래스를 함께 사용해야지 의미있는 스타일링을 할 수 있습니다.
반복적으로 사용되는 스타일들을 컴포넌트로 추상화하여 재사용할 수 있습니다.
기본적으로 제공되는 유틸리티 클래스 외에도, 프로젝트 요구사항에 맞게 테마를 확장하거나 새로운 유틸리티 클래스를 추가하여 커스터마이징할 수 있습니다.
장점
- 클래스의 이름을 고민하지 않아도 됩니다.
- 쉽게 반응형 페이지를 구현할 수 있도록 지원합니다.
- 기본적으로 제공하는 BreakPoint가 존재하기 때문에 복잡한 반응형 디자인도 쉽게 구현할 수 있습니다.
- 따로 커스터마이징이 가능합니다.
- 기본 정의된 테마를 확장할 수도 있고 새로운 속성을 추가할 수 있습니다.
- 반복되는 스타일은 컴포넌트 추상화, 클래스 추상화를 통해서 재사용 가능합니다.
- 공식문서가 매우 친절하고 학습 난이도가 낮습니다.
- 다크 모드 지원 dark: 프리픽스 방식으로 지원 ( 스타일을 직접 추가 하는 방식 )
조금 불편한 방법일 수도 있지만 모듈화가 잘 이루어지면 나중에 dark 클래스 추가만으로도 손쉽게 다크모드를 적용할 수 있습니다. - Tailwind CSS 공식 커뮤니티가 존재하며 컴포넌트 또는 완성된 페이지들도 제공합니다.
단점
- 코드의 직관성은 좋으나 가시성은 떨어집니다.
-> https://marketplace.visualstudio.com/items?itemName=heybourn.headwind 해당 플러그인으로 어느정도 해소가 가능합니다. - 초기 학습 곡선: Tailwind의 유틸리티 클래스가 많아 익숙해지기까지 시간이 걸릴 수 있습니다.
- 클래스 중복: HTML 코드에 많은 클래스가 중첩될 수 있어 가독성이 떨어질 수 있습니다.
- 의존성 문제: 프로젝트의 스타일링이 Tailwind에 종속되므로, 다른 CSS 프레임워크로 전환하기 어려울 수 있습니다.
- JSX의 가독성 저하: React 같은 프레임워크에서 JSX 코드가 복잡해질 수 있습니다.
- 커스터마이징 제약: 매우 구체적인 디자인 커스터마이징이 필요한 경우 Tailwind의 기본 제공 클래스만으로는 한계가 있을 수 있습니다.
언제 사용해야 하는가?
디자이너와 협업하며 빠르게 UI를 반복해야 할 때
작은 팀이나 개인 프로젝트에서 CSS 관리 복잡도를 낮추고 싶을 때
디자인 시스템을 코드로 일관되게 유지해야 할 때
결론
Tailwind CSS는 유틸리티 중심의 접근으로 '어떻게 스타일을 적용할 것인가'에 집중하게 해 주며, 대규모 프로젝트에서도 일관된 디자인을 유지하게 도와줍니다. 클래스가 많아지면 HTML이 복잡해질 수 있으므로, 필요할 땐 @apply 지시자를 써서 별도의 컴포넌트 클래스에 묶어 관리하는 방식도 병행해 보는거를 추천합니다.
