v4 compiler와 PostCSS plugin을 설치한다.
스타일이 안 보이면 클래스에서 Root Layout까지 순서대로 추적한다
Tailwind CSS v4는 PostCSS plugin, globals.css의 import와 theme, Root Layout import가 모두 연결되어야 화면에 나타난다.
2
PostCSS 설정
// postcss.config.mjs
"@tailwindcss/postcss": {}
"@tailwindcss/postcss": {}
Next.js CSS 처리 단계에 Tailwind를 연결한다.
3
CSS-first 진입점
@import "tailwindcss";
@theme { /* tokens */ }
@theme { /* tokens */ }
globals.css에서 layer를 불러오고 디자인 token을 선언한다.
4
앱 진입점 연결
// app/layout.tsx
import "./globals.css";
import "./globals.css";
Root Layout이 생성된 전역 CSS를 가져와 모든 하위 화면에 적용한다.
진단 기준 전체가 빠지면 postcss.config.mjs와 @import, token만 빠지면 @theme, 외부 package만 빠지면 @source를 확인한다.