핵심 요약
Tailwind가 클래스를 무시하는 건 거의 항상 "빌드 시 그 클래스를 소스에서 못 찾아 제거(purge)"했기 때문이다. ① content 경로에 파일이 포함됐는지, ② 클래스명을 문자열로 동적 조합하지 않았는지부터 확인한다.
1. 원인별 체크
| 증상 | 원인/해결 |
|---|---|
| 특정 컴포넌트만 무시 | content glob에 그 경로 추가 |
| 동적 클래스 안 먹힘 | `text-${color}` 금지 → 완전한 클래스명 사용 |
| 전부 무시 | dev 서버 재시작, 캐시 삭제 |
2. 동적 클래스 함정 해결
// ❌ 스캐너가 못 찾음
const c = `text-${color}-500`
// ✅ 완전한 클래스명을 매핑으로
const map = { red: 'text-red-500', blue: 'text-blue-500' }
<span className={map[color]} />3. 함정
- 임의값은
w-[37px]처럼 대괄호로 — 계산식 문자열은 못 만든다 - 외부 라이브러리 클래스가 우선순위로 이기면
!(important) 또는 레이어 조정 - v4는 설정 방식이 바뀌었으니(CSS-first) 버전에 맞는 content 설정 확인
자주 묻는 질문
왜 동적으로 만든 클래스는 안 되나요?
Tailwind는 소스 코드를 텍스트로 스캔해 쓰인 클래스만 생성합니다. 런타임에 문자열로 조합한 클래스는 스캔 시점에 존재하지 않아 제거됩니다. 완전한 클래스명을 코드에 노출하세요.
prod 빌드에서만 깨집니다.
dev는 전체를 포함하지만 prod는 purge합니다. content 경로 누락이나 동적 클래스가 원인일 가능성이 큽니다.
댓글 0