Tailwind v4 @theme 다크모드 토큰이 dev는 되는데 production만 깨집니다

Tailwind v3 → v4 마이그레이션 진행 중인데 미친 듯이 헤매고 있습니다.

환경: Tailwind CSS 4.2.2, Next.js 16.2, PostCSS 8.5, @tailwindcss/postcss

증상:

next dev에서: 다크모드 토글 → 색 정상 적용 ✅
next build && next start에서: 다크모드 토글해도 색 안 바뀜 ❌
라이트모드는 production에서도 정상
build 출력에 에러 없음, lint 통과

설정:

/* app/globals.css */
@import "tailwindcss";

@theme {
  --color-bg: oklch(98% 0 0);
  --color-fg: oklch(15% 0 0);
  --color-primary: oklch(70% 0.15 220);
}

.dark {
  --color-bg: oklch(15% 0 0);
  --color-fg: oklch(95% 0 0);
}

tailwind.config.js는 v4부터 안 쓴다 해서 안 만들었습니다. html.dark로 토글하는 로직은 모드 토글 라이브러리(next-themes)가 처리하고, dev에선 잘 됩니다.

production 빌드 결과의 CSS를 보면 .dark { ... } 블록이 통째로 사라져 있더라고요. PostCSS purge가 잘못 처리하는 건가요?

댓글 0