Tailwind는 빠른 작성 뒤에 일관성 규칙이 필요하다

유틸리티 클래스는 빠르지만, 반복 패턴과 디자인 토큰을 관리하지 않으면 화면마다 다른 규칙이 쌓입니다.

token

@theme 토큰

색, spacing, breakpoint는 CSS @theme과 디자인 기준을 맞춰 한 언어로 씁니다.

compose

반복 추출

반복되는 긴 클래스 묶음은 컴포넌트나 variant 유틸로 감쌉니다.

state

상태 표현

hover, focus, disabled, dark를 같은 순서로 검토합니다.

source

자동 탐지와 @source

기본 자동 탐지를 쓰고 외부 package만 @source로 추가하며 동적 문자열을 피합니다.

장점

작은 UI를 빠르게 만들고 디자인 토큰을 클래스 이름으로 직접 적용할 수 있습니다.

Tailwind 규칙 한계

페이지마다 임의 값이 늘어나면 CSS보다 추적하기 어려운 스타일 분산이 생깁니다.

Tailwind의 생산성은 클래스 수를 줄이는 데서가 아니라 팀이 같은 토큰과 상태 규칙을 반복해서 쓰는 데서 나옵니다.