핵심 요약
Tailwind CSS v4의 Oxide 엔진(Rust + Lightning CSS)이 v3 대비 빌드 4.8배, 증분 빌드 11배 빨라졌다. 설정도 JS 파일에서 CSS @theme 블록으로 이동. 단, plugin 생태계 일부 호환 안 됨, JIT 정규식 패턴 변경, preflight 차이 등 마이그레이션 함정이 있다.
1. 무엇이 바뀌었나
- Oxide 엔진: Rust 기반 파서·번들러, Lightning CSS 내장
- CSS-first config: tailwind.config.js → CSS @theme 블록
- 자동 콘텐츠 감지: content 배열 불필요 (.gitignore 기반)
- 최신 CSS 활용: @property, color-mix(), cascade layers 내장
- 컨테이너 쿼리 1급 시민: @container 단축 문법
2. 빌드 시간 실측
Next.js 15 앱, 컴포넌트 412개, Tailwind 클래스 8400개 사용 환경.
| 작업 | v3.4 | v4 Oxide | 가속 |
|---|---|---|---|
| 첫 빌드 (cold) | 9.4s | 1.95s | 4.8x |
| 증분 빌드 | 820ms | 74ms | 11x |
| dev 서버 HMR | 340ms | 38ms | 9x |
| 최종 CSS 크기 | 42KB | 38KB | -10% |
| 피크 메모리 | 312MB | 118MB | -62% |
3. CSS-first config — 새 설정 방식
/* app/globals.css */
@import "tailwindcss";
@theme {
--color-brand: oklch(0.72 0.18 250);
--color-brand-dark: oklch(0.45 0.18 250);
--font-display: "Pretendard Variable", sans-serif;
--spacing-128: 32rem;
--breakpoint-3xl: 1920px;
}
/* 커스텀 유틸 */
@utility tap-highlight-none {
-webkit-tap-highlight-color: transparent;
}4. v3 → v4 마이그레이션 함정 7개
| 함정 | 증상 | 해결 |
|---|---|---|
| border 기본색 | border-gray-200 → currentColor | border-class 명시 또는 @layer base에서 재정의 |
| shadow 강도 | shadow-sm → shadow-xs로 이름 변경 | 전체 일괄 치환 |
| ring 기본 | 3px → 1px | ring-3 명시 |
| @apply 범위 | module CSS에서 안 됨 | @reference 지시문 추가 |
| plugin API 변경 | JS plugin 70% 호환 안됨 | @plugin "..." 문법으로 재작성 |
| preflight 차이 | button cursor 기본 변경 | base layer에서 강제 |
| 자동 감지 누락 | 외부 패키지 클래스 안 잡힘 | @source "../pkg/**/*.tsx" |
5. 자동 콘텐츠 감지 — 어떻게 동작하나
v4는 content 배열이 없다. Rust 워커가 프로젝트 루트에서 .gitignore와 .tailwindignore를 읽어 자동으로 .html .js .jsx .ts .tsx .vue .svelte 등을 스캔. node_modules는 기본 제외. 외부 패키지 클래스를 잡으려면 @source 지시문으로 명시.
@import "tailwindcss";
/* 외부 패키지 클래스도 스캔 */
@source "../../node_modules/@my-org/ui/**/*.tsx";
/* 특정 디렉터리 제외 */
@source not "./src/legacy/**";6. 컨테이너 쿼리 1급 시민
<div class="@container">
<div class="grid grid-cols-1 @md:grid-cols-2 @xl:grid-cols-3">
<!-- 부모 컨테이너 크기 기준으로 반응형 -->
</div>
</div>v3에서는 @tailwindcss/container-queries plugin 필요. v4는 코어. @container/sidebar 같은 named container도 지원.
7. 플러그인 생태계 — 호환성 현실
| 플러그인 | v4 호환 | 비고 |
|---|---|---|
| @tailwindcss/typography | O | v0.6 이상 |
| @tailwindcss/forms | O | v0.6 이상 |
| tailwindcss-animate | X | tw-animate-css로 대체 |
| daisyUI | O | v5 이상 |
| flowbite | 부분 | 일부 컴포넌트 깨짐 |
8. 운영 도입 결정
- 도입 OK: 신규 프로젝트, Tailwind plugin 의존 적은 팀
- 주의: 디자인 시스템이 plugin 5개 이상에 묶여있는 팀
- 유지: 빌드 시간이 이미 1초 이하인 소형 프로젝트(이득 적음)
- 마이그레이션 도구: npx @tailwindcss/upgrade — 95% 자동 변환
참고
- tailwindcss.com/blog/tailwindcss-v4
- github.com/tailwindlabs/tailwindcss/tree/v4
댓글 0