1 - Tailwind란 ?

 

Tailwind CSS는 유틸리티-퍼스트(Utility-First) CSS 프레임워크로, 미리 정의된 클래스를 사용해 빠르게 UI를 구성할 수 있도록 돕는 라이브러리이다. 전통적인 CSS 프레임워크와는 달리, Tailwind는 특정한 컴포넌트를 제공하지 않고, 작고 재사용 가능한 스타일 유틸리티 클래스를 제공한다.

 

 

Tailwind CSS의 장점

1. CSS 파일 작성이 필요 없음
   • 별도의 CSS를 작성하지 않아 작업이 간편하다
2. 클래스 이름 고민 해소
   • Tailwind의 미리 정의된 클래스 이름을 사용하면 네이밍에 대한 부담이 줄어든다
3. 디자인 시간 단축
   • 색상, 폰트 등 미리 제공된 스타일을 활용해 디자인에 드는 시간을 절약할 수 있다
4. 간편한 반응형 디자인
   • 반응형 유틸리티 클래스(sm:, md:, lg: 등)를 사용해 손쉽게 반응형 디자인을 구현할 수 있다
5. 매우 친절한 공식문서
   • 공식문서가 잘 적혀있어 새로 학습하기 쉽다

---

Tailwind CSS의 단점

1. 가독성 저하 가능성
   • HTML(JSX)과 CSS 스타일이 한 파일에 섞여 작성되므로 코드 가독성이 떨어질 수 있다
2. 클래스 학습 필요
   • Tailwind에서 제공하는 클래스의 구조와 기능을 익히는 시간이 필요하다
3. 설정의 번거로움
   • 프로젝트 초기 설정(tailwind.config.js 등)을 항상 진행해야 하므로 번거로울 수 있다