Tailwind CSS 4 마이그레이션 가이드 — CSS-first 설정과 성능 개선 총정리

Tailwind CSS 4의 변화

Tailwind CSS 4는 설정 방식이 완전히 바뀌었습니다. tailwind.config.js가 사라지고, CSS 파일에서 직접 설정하는 CSS-first 접근법을 채택했습니다.

주요 변경사항

1. CSS-first 설정

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

@theme {
  --color-primary: #3b82f6;
  --font-sans: "Inter", sans-serif;
  --breakpoint-sm: 640px;
}

2. Oxide 엔진

• Rust 기반 엔진으로 빌드 속도 최대 10배 향상
• Lightning CSS 통합으로 PostCSS 의존 제거

3. 새로운 유틸리티

• text-wrap-balance — 텍스트 균형 맞춤
• field-sizing-content — 입력 필드 자동 크기
• color-mix() 기반 투명도 — 더 유연한 색상 조합
• 3D Transform 유틸리티 추가

마이그레이션 체크리스트

1. @tailwind 지시어 → @import "tailwindcss"
2. tailwind.config.js → CSS @theme 블록
3. darkMode: 'class' → 기본 지원 (설정 불필요)
4. 플러그인 → @plugin 지시어

결론

Tailwind CSS 4는 DX와 빌드 성능 모두를 크게 개선했습니다. 기존 프로젝트 마이그레이션도 자동화 도구(npx @tailwindcss/upgrade)로 대부분 처리됩니다.