Tailwind에서 bg-error가 적용되지 않는 문제 해결하기 🚀

🔥 문제 상황

Next.js에서 TailwindCSS를 사용 중인데, tailwind.config.ts에서 error 색상을 CSS 변수(--color-error)로 설정했음에도 bg-error 클래스가 적용되지 않는 문제가 발생했다.

<button className="bg-error text-white px-6 py-3 rounded-lg">
  삭제
</button>

하지만 크롬 개발자 도구에서 bg-error를 검색해도 관련 스타일이 존재하지 않았다! 🤯

🔍 원인 분석: Tailwind JIT 모드와 클래스 자동 제거

Tailwind는 JIT(Just-In-Time) 모드에서 사용된 클래스만 포함하는 방식으로 동작한다.

✅ JIT 모드란?

JIT 모드는 실제 코드에서 사용된 Tailwind 클래스를 감지하여 빌드에 포함하고, 사용되지 않은 클래스를 자동 제거하는 방식으로 동작한다.

JIT 모드의 주요 특징:

• 사용된 클래스만 포함하여 빌드 → 파일 크기를 최소화 🎯
• 정적인 클래스를 감지할 수 있음 (bg-red-500, text-blue-600 등)
• 동적으로 추가된 클래스(예: bg-${color})는 감지하지 못할 수도 있음

❌ 문제의 원인

bg-error 클래스가 JSX 코드에 직접 사용되지 않았기 때문에 Tailwind JIT가 이를 감지하지 못하고 제거한 것이 원인이었다.

// tailwind.config.ts
theme: {
  extend: {
    colors: {
      error: "var(--color-error)", // CSS 변수 사용
    },
  },
},

Tailwind는 error 색상을 var(--color-error)로 설정했지만, JSX 코드에서 bg-error가 직접 사용되지 않았기 때문에 이를 "미사용 클래스"로 간주하고 빌드에서 제외했다.

---

✅ 해결 방법: safelist 추가

Tailwind가 bg-error 클래스를 강제로 유지하도록 safelist 설정을 추가하면 된다.

// tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
  theme: {
    extend: {
      colors: {
        error: "rgb(var(--color-error) / <alpha-value>)", // Alpha 값 지원 가능
      },
    },
  },
  safelist: ["bg-error"], // 강제로 빌드 포함
  plugins: [],
};

export default config;

이렇게 설정하면 Tailwind가 bg-error 클래스를 자동으로 제거하지 않고 빌드에 포함하게 된다.

---

🚀 safelist 없이 해결하는 방법

만약 safelist를 추가하지 않고 해결하고 싶다면, bg-[var(--color-error)]처럼 CSS 변수를 직접 Tailwind 클래스에서 사용하면 된다.

<button className="bg-[var(--color-error)] text-white px-6 py-3 rounded-lg">
  삭제
</button>

이 방법을 사용하면 Tailwind가 bg-[...] 형식을 감지할 수 있기 때문에 JIT 모드에서도 제거되지 않는다.

---

🏁 결론: Tailwind JIT 모드에서 CSS 변수를 사용할 때 주의할 점

1️⃣ Tailwind JIT 모드는 사용되지 않은 클래스를 자동 제거
2️⃣ JSX 코드에서 bg-error를 직접 사용하지 않으면 감지되지 않을 수도 있음
3️⃣ 해결 방법 1: safelist에 bg-error 추가
4️⃣ 해결 방법 2: bg-[var(--color-error)]을 사용하여 Tailwind가 감지할 수 있도록 변경

이제 Tailwind JIT가 동작하는 방식을 더 잘 이해하고, 유사한 문제를 쉽게 해결할 수 있을 것이다! 🚀

---

🎯 참고

• Tailwind JIT 모드 공식 문서