Tailwind v4 적용 후 production 빌드만 스타일이 안 먹습니다

거의 확실히 workspace 패키지의 클래스가 content scan에서 빠진 문제입니다. Tailwind v4는 v3와 content 설정 방식이 다릅니다.

v4의 새 방식

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

/* 추가 source 명시 — v4 신규 */
@source "../../packages/ui/src/**/*.{js,ts,jsx,tsx}";
@source "../../packages/shared/src/**/*.{js,ts,jsx,tsx}";

v3의 tailwind.config.js의 content 배열이 v4에서는 CSS 안의 @source로 이동했습니다. 자동 감지는 현재 디렉터리만 됩니다.

왜 dev에서는 동작했나

dev 모드에서는 JIT가 모든 클래스를 그때그때 생성하지만, production은 사용된 클래스만 추출하기 때문에 스캔되지 않은 파일의 클래스는 빠집니다.

점검 명령

# 빌드 결과물에 특정 클래스 들어있는지 확인
grep -r "bg-blue-500" .next/static/css/
# 없으면 content scan에서 누락된 것

저도 같은 문제 겪었는데 한 가지 더 — 만약 cva나 tailwind-variants 같은 라이브러리에서 동적 문자열 조립으로 클래스를 만들고 있다면 그것도 못 찾습니다.

// 작동 안 함 (Tailwind가 못 찾음)
const color = props.danger ? 'red' : 'blue'
const className = `bg-${color}-500`  // ❌

// 작동함 (전체 문자열이 코드에 존재)
const className = props.danger ? 'bg-red-500' : 'bg-blue-500'  // ✓

이런 케이스가 의심되면 safelist 사용:

/* globals.css */
@source inline("bg-{red,blue,green,yellow}-500");

v4에서는 inline source가 추가됐어요.

네, 가능합니다. tailwind.css 같은 파일을 따로 두고 globals.css에서 import 하는 패턴이 깔끔해요.

/* app/tailwind-sources.css */
@source "../../packages/ui/src/**/*.{js,ts,jsx,tsx}";
@source "../../packages/shared/src/**/*.{js,ts,jsx,tsx}";
@source inline("bg-{red,blue,green,yellow}-500");
@source inline("text-{xs,sm,base,lg,xl,2xl}");

/* app/globals.css */
@import "tailwindcss";
@import "./tailwind-sources.css";

한 가지 주의 — @source는 import한 파일 기준으로 상대 경로가 잡히므로, 이전한 파일에서 다시 계산해야 합니다.