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

Question

Tailwind CSS v4 마이그레이션 후 dev는 정상인데 production 빌드 스타일 누락. content scan과 PostCSS 설정 진단.

김영삼 · Accepted Answer

거의 확실히 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은 사용된 클래스만 추출하기 때문에 스캔되지 않은 파일의 클래스는 빠집니다.
점검 명령
# 빌드 결과물에 특정 클래스 들어있는

프론트수진 · Answer

저도 같은 문제 겪었는데 한 가지 더 — 만약 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가 추가됐어요.

디자인시스템 · Answer

두 분 답변 다 도움됐어요. @source로 워크스페이스 추가하니 80% 해결됐고, 동적 클래스 문제도 한 군데 있어서 inline source로 해결했습니다. 추가 질문 — @source를 별도 CSS 파일에 모아서 관리해도 되나요?

김영삼 · Answer

네, 가능합니다. 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한 파일 기준으로 상대 경로가 잡히므로, 이전한 파일에서 다시 계산해야 합니다.

댓글 0