Tailwind CSS에서 동적 클래스가 빌드 후에 적용이 안 됩니다

Question

김영삼 · Accepted Answer

Tailwind은 빌드 시 정적 분석으로 사용된 클래스만 추출합���다. 동적으로 조합된 문자열은 감지하지 못합니다.// ❌ 안 됨 — 빌드 시 감지 불가
const color = 'red'

// ✅ 방법 1: 전체 클래스명 사용
const colorClass = {
  red: 'bg-red-500',
  blue: 'bg-blue-500',
  green: 'bg-green-500',
}

// ✅ 방법 2: safelist에 등록
// tailwind.config.js
module.exports = {
  safelist: ['bg-red-500', 'bg-blue-500', 'bg-green-500']
}규칙: Tailwind 클래스는 항상 완전한 문자열로 작성하세요.

서버관리자 · Answer

덕분에 완벽히 해결했습니다! 감사합니다 🙏

댓글 0