Tailwind CSS
가장 대표적인 Utility-First CSS 프레임워크
이미 작성된 CSS 코드를 클래스명으로 가져다 쓸 수 있다.
🗂️ Docs & Reference
🧩 Utility-First
Utility-First는 말 그대로 작은 단위 클래스들을 먼저 제공하는 방식을 의미한다.
보통 CSS 프레임워크는 두 가지 접근 방식을 가진다.
1. 컴포넌트 First 방식
Bootstrap 같은 프레임워크는 버튼, 카드, 네비게이션 바 같은 미리 만들어진 컴포넌트를 제공한다.
html
<button class="btn btn-primary">Click</button>- 이미 디자인된 버튼을 가져다 쓰는 방식이라 편리하지만, 커스텀하려면 덮어써야 해서 코드가 지저분해질 수 있다.
2. Utility-First 방식
Tailwind는 “버튼” 같은 완성품을 주지 않고, 작은 스타일 속성 단위(margin, padding, color, flex, grid etc)를 클래스 이름으로 제공한다.
html
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">Click</button>- 여기서 px-4, py-2, bg-blue-500, text-white 같은 것들이 유틸리티 클래스이다.
- 즉, 버튼이라는 컴포넌트를 제공하는 게 아니라, 버튼을 직접 조합해서 만들 수 있도록 디자인 원자 단위를 제공한다.
💡 정리
- Utility-First = 스타일 속성 단위 클래스 중심
- 작은 단위들을 조합해서 필요한 디자인을 만드는 방식
장점
- 불필요한 CSS 작성이 줄어듦
- 그만큼 개발 속도가 빨라짐
- 일관된 네이밍으로 협업 시 코드 가독성 ↑
- 체계적이고 일관된 디자인 사용 가능
단점
- 초기 설정이 조금 복잡할 수 있음
- CSS 크기가 커질 수 있음
- 클래스가 너무 많아져서 복잡하고 지저분해 보일 수 있다.