본문 바로가기
Q&A2022년 12월 1일1분 읽기

Tailwind CSS를 써야 하는 이유

배
배준호
조회 1073댓글 1

Tailwind CSS가 유행인데 왜 좋은 건가요? 인라인 스타일이랑 뭐가 다른가요?

댓글 1

김김영삼3년 전

Tailwind CSS의 장점:

  • 생산성 — CSS 파일 왔다갔다 안 해도 됨
  • 일관성 — 디자인 시스템 기본 내장 (간격, 색상 등)
  • 번들 크기 — 미사용 클래스 자동 제거 (보통 10KB 이하)
  • 반응형 — md:flex lg:grid 같은 접두사로 간편

인라인 스타일과의 차이:

  • 인라인: hover, media query, ::before 불가
  • Tailwind: hover:bg-blue-600, md:hidden 가능
  • 인라인: 캐싱 불가
  • Tailwind: CSS 파일로 생성되어 캐싱됨
<!-- Tailwind -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition">
클릭
</button>

호불호가 갈리지만, 한번 익숙해지면 돌아가기 어렵다는 평이 많습니다.

Ctrl+Enter로 등록