FE develop/Tailwind

1 - Tailwind란 ?

hoj0806 2024. 12. 10. 18:42

 

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 등)을 항상 진행해야 하므로 번거로울 수 있다