Tailwind CSS v4.0 공식 출시: 주요 기능 및 혁신 사항

Tailwind CSS v4.0 공식 출시: 주요 기능 및 혁신 사항

오늘(2025년 1월 23일), Tailwind CSS v4.0이 정식 출시되었습니다. 이번 버전은 성능, 유연성, 개발자 경험을 혁신적으로 개선했으며, 현대 웹 플랫폼의 최신 CSS 기능을 적극 활용합니다. 아래는 핵심 변화와 기능을 정리한 내용입니다.

---

1. 성능 대폭 향상

• 새로운 고성능 엔진
  Rust 기반의 Oxide 엔진으로 전체 빌드 시간이 5배, 증분 빌드는 100배 이상 빨라졌습니다. 특히 변경 사항이 없는 경우 192µs로 즉시 반영됩니다.
  • 예시:

    항목	v3.4	v4.0	개선
    전체 빌드	378ms	100ms	3.78x
    증분 빌드 (변경 O)	44ms	5ms	8.8x

• Lightning CSS 통합
  @import, 벤더 프리픽스, 중첩 CSS를 내장 지원해 PostCSS 플러그인 의존성을 제거했습니다.

---

2. 설치 및 구성 간소화

• 한 줄 설치
  CSS 파일에 @import "tailwindcss";만 추가하면 즉시 사용 가능.
• 자동 컨텐츠 감지
  .gitignore 기반으로 템플릿 파일을 자동 스캔하며, 수동 설정이 필요 없습니다.
• Vite 플러그인 통합
  PostCSS 대신 Vite 플러그인을 사용하면 최적화된 성능을 경험할 수 있습니다.

---

3. CSS-첫 번째 구성

• JavaScript 설정 파일 제거
  기존 tailwind.config.js 대신 CSS 파일 내 @theme 디렉티브로 테마 변수, 유틸리티, 변형을 직접 정의합니다.

  @import "tailwindcss";
  @theme {
    --font-display: "Satoshi", sans-serif;
    --color-avocado-500: oklch(0.84 0.18 117.33);
  }

• CSS 변수 기반 테마
  모든 디자인 토큰이 CSS 변수(--color-*, --spacing-* 등)로 노출되어 동적 활용이 가능합니다.

---

4. 새로운 기능 및 개선 사항

• 컨테이너 쿼리 내장 지원
  @container와 @min-*/@max-* 변형으로 플러그인 없이 반응형 디자인 구현 가능.

  <div class="@container">
    <div class="@min-md:grid-cols-3">...</div>
  </div>

• 3D 변환 유틸리티
  rotate-x-*, translate-z-* 등 3D 공간에서의 요소 제어 지원.
• 확장된 그라데이션 API
  원형(bg-radial-*), 원뿔(bg-conic-*) 그라데이션 및 색상 보간 모드 추가.
• 모던 색상 팔레트
  P3 색상 공간(oklch) 적용으로 더 생생한 색상 표현.

---

5. 기타 주요 변화

• 동적 유틸리티 값
  임의의 값(예: grid-cols-15)을 설정 파일 없이 즉시 사용 가능.
• not-* 변형
  미디어 쿼리나 선택자를 부정하는 조건부 스타일링 지원.
• @starting-style
  JavaScript 없이 요소 등장/퇴장 애니메이션 구현.

---

업그레이드 가이드

기존 프로젝트 마이그레이션을 위해 자동화 도구와 상세한 가이드가 제공됩니다. 주요 변경 사항은 다음과 같습니다:

• 더 이상 사용되지 않는 유틸리티 제거(text-opacity-* → text-{color}/*).
• border 기본 색상이 currentColor로 변경.
• PostCSS/CLI는 별도 패키지(@tailwindcss/postcss, @tailwindcss/cli)로 분리.

---

결론

Tailwind CSS v4.0은 성능, 유연성, 개발 편의성을 극대화한 프레임워크로, 현대 웹 개발의 표준을 재정의했습니다. 새 프로젝트는 물론, 기존 프로젝트도 공식 가이드를 참고해 빠르게 업그레이드할 것을 추천합니다.

🔗 참고 자료:

• 공식 발표문
• v4.0 마이그레이션 가이드