Tailwind Usage

유틸리티 클래스 관리

Tailwind는 JSX 안에서 빠르게 스타일을 조합하게 해주지만, 최종 CSS는 content 스캔과 빌드 최적화를 통과한 클래스만 남습니다.

컴포넌트에서 작성하는 기준

layout

구조 유틸리티

flex, grid, gap, p-*로 배치와 간격을 바로 표현합니다.

token

디자인 토큰

색상과 크기는 설정에 정의된 스케일을 따라 일관성을 지킵니다.

state

상태 접두사

hover:, focus:, disabled:로 상호작용 상태를 같은 자리에서 봅니다.

screen

반응형 접두사

sm:, md:, lg:를 붙여 화면 폭별 변화를 명시합니다.

클래스 목록이 길어질 때

의미 있는 컴포넌트로 쪼개거나 variant 헬퍼로 조합을 모읍니다. 무조건 @apply로 숨기면 유틸리티 흐름을 잃을 수 있습니다.

동적 클래스가 필요할 때

문자열 조립보다 상태별 전체 클래스 매핑을 두면 스캔 누락과 오타를 줄일 수 있습니다.

팀 디자인이 흔들릴 때

tailwind.config.js의 색상, 간격, 폰트 토큰을 먼저 정리해야 화면마다 다른 임의 값이 늘어나지 않습니다.