🚗TechFeed
Frontend

Tailwind CSS v4 — 무엇이 달라졌나

Tailwind CSS v4의 새로운 기능과 마이그레이션 포인트.

Tailwind CSS v4의 새로운 기능과 마이그레이션 포인트.

v4의 핵심 변화

Tailwind CSS v4의 가장 큰 변화: 설정 파일 대신 CSS에서 직접 설정. tailwind.config.js가 사라지고 @theme 디렉티브로 CSS 안에서 커스터마이징합니다. 빌드 속도도 Rust 기반 엔진으로 대폭 향상.

새로운 기능들

  • @theme 디렉티브: CSS 네이티브 설정
  • 자동 콘텐츠 감지: content 배열 불필요
  • 네이티브 중첩: CSS nesting 지원
  • 3D 트랜스폼 유틸리티: rotate-x, perspective 등

v3에서 마이그레이션

공식 마이그레이션 도구: npx @tailwindcss/upgrade. 자동으로 대부분의 변경사항을 처리해주지만, 커스텀 플러그인은 수동 확인이 필요합니다.

tailwindcss프론트엔드스타일링v4

관련 포스트

Next.js 15 핵심 변경사항 총정리2026-03-13shadcn/ui 완벽 가이드 — 복붙으로 만드는 UI2026-03-13React Server Components 실전 가이드2026-03-13웹 성능 최적화 — Core Web Vitals 2026 가이드2026-03-13