Tailwind CSS 4.0 — CSS-first 설정과 신규 유틸리티

CSS-first 설정

tailwind.config.js 대신 CSS 파일에서 직접 설정합니다.

@import "tailwindcss";

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

@utility tab-4 {
  tab-size: 4;
}

새로운 유틸리티

• text-wrap-balance: 텍스트 줄바꿈 균형
• field-sizing-content: 입력 필드 자동 크기
• 컨테이너 쿼리 네이티브 지원

성능

Lightning CSS 기반으로 빌드 속도가 10배 이상 빨라졌습니다.