Tailwind CSS는 "유틸리티 퍼스트" 방식의 CSS 프레임워크 입니다. 유틸리티 퍼스트란 이미 만들어진 유틸리티 CSS 클래스를 활용하여 스타일을 신속하게 적용하는 방식인데요. 이 접근법은 개발자가 CSS를 직접 작성하지 않아도 되기에, 빠른 개발 속도와 일관된 디자인 시스템 구현이 가능합니다.

TailwindCSS 공식 홈페이지 에서도 HTML을 벗어나지 않고도 웹사이트를 빠르게 구축할수 있다고 이야기하고 있는데요.

TailwindCSS는아래와 같은 특성이 있습니다.

1. 유틸리티 퍼스트 디자인: HTML에 인라인으로 스타일 코드를 배치함으로써, 별도의 CSS파일을 관리할 필요가 없습니다. 또한 클래스명을 추적하여 CSS 코드를 변경하는 번거로움 없이, 필요한 스타일 변경을 즉시 반영할 수 있습니다. 유틸리티 클래스를 사용하기 때문에 래핑 클래스, 컨테이너 클래스 같은 클래스를 사용할 필요도 없습니다. 따라서 복잡한 래핑 구조를 피하면서도 유연한 구조가 가능합니다.
   

2. 일관된 디자인 및 확장성: : Tailwind는 일관된 디자인을 쉽게 구현할 수 있도록 미리 정의된 유틸리티 클래스를 제공합니다. 이 클래스들은 색상, 크기, 간격 등에서 일관성을 유지합니다. 또 반복되는 스타일은 추가 유틸리티 클래스를 생성하여 손쉽게 재사용할 수 있습니다.

   
   

3. 자동완성 및 최적화: Tailwind CSS는 IntelliSense 플러그인을 지원하여 클래스 이름의 미리보기 및 자동완성 기능을 제공, 개발자가 손쉽게 스타일을 적용할 수 있도록 돕습니다. 따라서 수많은 클래스명을 외우지 않아도 괜찮습니다. 또한, PurgeCSS가 내장되어 있어 사용되지 않는 스타일을 자동으로 제거하여 최적화된 CSS 파일을 생성합니다.

그렇지만 Tailwind CSS의 유틸리티 퍼스트 접근 방식은 HTML에 다수의 클래스가 추가되어 코드가 다소 길어질 수 있다는 단점과 초기에 클래스명을 익혀야합니다. 또한 styled-components와 같이 상태에 따라 동적으로 스타일을 지정하는 것이 상대적으로 어려울 수 있는데요.

그렇지만 2023년 가장 사랑받은 라이브러리인 Shadcn/UI 에서도 Tailwind CSS를 사용하고 있는만큼 빠른 프로토타이핑 및 일관된 디자인 시스템을 구축할때 도입해보아도 좋을것 같습니다.

https://tailwindcss.com/