Tailwind CSS v4 기능 및 마이그레이션 가이드

Tailwind CSS v4.0에는 완전히 Rust로 작성된 새로운 컴파일 엔진이 도입되어 빌드 루프를 최대 10배까지 가속화합니다. 또한 JavaScript 기반 구성 파일(tailwind.config.js)에서 표준 CSS 변수를 사용하여 기본 스타일시트 내에서 사용자 정의가 정의되는 CSS 우선 접근 방식으로 전환됩니다.

이 문서에서는 Tailwind CSS v4의 주요 변경 사항을 검토하고 프로젝트를 업그레이드하는 데 도움이 되는 실용적인 마이그레이션 연습을 제공합니다.

1. Tailwind CSS v4의 주요 변경 사항

1) 녹으로 구동되는 “산화물” 엔진

v4의 정의 기능은 컴파일러입니다. Rust로 다시 작성된 Oxide 엔진은 이전 PostCSS 기반 엔진보다 훨씬 빠르게 스타일시트 파일을 처리합니다. 이는 거의 즉각적인 개발 서버 시작 및 HMR(핫 모듈 교체)로 변환되어 개발자의 흐름을 유지합니다.

2) CSS 우선 구성

tailwind.config.js 파일을 수정하는 대신 새로운 @theme 지시문을 사용하여 CSS 파일에서 직접 테마를 사용자 정의할 수 있습니다.

v4의 구성 예(CSS 구문)

@import "tailwindcss";

@theme {
  --color-brand-primary: #3b82f6;
  --color-brand-secondary: #10b981;
  --font-display: "Outfit", sans-serif;
}

컴파일러는 빌드 단계에서 이러한 CSS 변수를 구문 분석하고 해당 유틸리티 클래스(예: bg-brand-primary 및 font-display)를 자동으로 등록합니다.

3) 단순화된 Import 문

세 가지 개별 지시어(@tailwind base;, @tailwind components;, @tailwind utilities;)를 정의하는 대신 @import "tailwindcss"; 한 줄로 패키지를 가져옵니다.

2. 실제 마이그레이션 단계

기존 Tailwind CSS v3 프로젝트를 v4로 업그레이드하려면 다음 단계를 따르세요.

1단계: 종속성 설치

다음 명령을 실행하여 업데이트된 컴파일러 및 PostCSS 통합 패키지를 설치합니다.

npm install tailwindcss@next @tailwindcss/postcss@next

2단계: 구성을 CSS로 마이그레이션

tailwind.config.js에 정의된 사용자 정의 색상, 글꼴 또는 화면을 전역 스타일시트로 이동합니다.

- // tailwind.config.js
- module.exports = {
-   theme: {
-     extend: {
-       colors: {
-         customGray: '#1e293b',
-       }
-     }
-   }
- }

+ /* global.css */
+ @import "tailwindcss";
+ @theme {
+   --color-custom-gray: #1e293b;
+ }

3단계: PostCSS 구성 업데이트

새로운 Tailwind CSS 플러그인 래퍼를 가리키도록 프로젝트의 postcss.config.js을 업데이트하세요.

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

3. v4의 주목할만한 새로운 유틸리티 클래스

v4가 출시되면서 몇 가지 새로운 디자인 유틸리티가 기본적으로 지원됩니다.

CSS 하위 그리드 유틸리티: 이제 그리드 동기화를 용이하게 하기 위해 표준 클래스가 포함되었습니다(예: grid-rows-subgrid 및 grid-cols-subgrid).
3D 변환 지시어: HTML 속성(예: transform-3d, rotate-y-180) 내에서 직접 3D 회전, 원근 및 깊이를 구현합니다.
컨테이너 쿼리 지원: 컨테이너 쿼리에는 더 이상 외부 플러그인이 필요하지 않습니다. 개발자는 @container 유틸리티를 사용하여 뷰포트 중단점 대신 상위 치수를 기반으로 스타일을 적용할 수 있습니다.