Tailwind CSS v4의 주요 변경점

Q: 새로운 유틸리티 클래스는 어떤 기능을 추가했나요?

v4에서는 다음의 신규 유틸리티 클래스군을 도입했습니다: **애니메이션 및 전환 관련:** - `starting`: @starting-style 규칙으로 초기 상태 정의 (Entry Animations API) - `has-`: :has() 선택자 기반 부모 상태 제어 - `group-data-`: data-* 속성 기반 그룹 제어 **레이아웃 관련:** - `scroll-start-*`: scroll-start-x/y 속성 (스크롤 시작점 제어) - `field-sizing`: field-sizing: content로 input 필드 자동 리사이징 - `anchor-*`: CSS Anchor Positioning으로 절대 위치 계산 **타이포그래피:** - `text-wrap-balance`: text-wrap: balance로 마지막 줄 단어 수 균등화 - `text-wrap-pretty`: text-wrap: pretty로 orphan 방지 이들은 모두 [CSS Working Group](https://www.w3.org/Style/CSS/) 최신 명세에 기반하며, 브라우저 지원도 90% 이상입니다.

Q: 브레이크포인트 처리는 어떻게 개선됐나요?

v4부터 동적 뷰포트 범위 기반 브레이크포인트를 지원합니다: ``` @media (width >= 768px) and (width < 1024px) { /* md 범위: 768px ~ 1023px */ } ``` v3의 min-width 기반 접근(`@media (min-width: 768px)`)에서 범위 기반으로 변경하여, 동일 요소가 여러 브레이크포인트에 중복 적용되는 캐스케이드 문제를 제거했습니다. 결과적으로 생성되는 CSS 파일 크기를 평균 8~12% 단축하고, 미디어 쿼리 매칭 비용을 O(n)에서 O(1)로 개선했습니다. 또한 컨테이너 쿼리(@container)에서도 범위 기반 구문을 적용하여, 부모 컨테이너의 너비 범위에 따른 세밀한 레이아웃 제어를 가능하게 합니다.

Tailwind CSS v4는 어떤 구조 변화를 가져왔나요?

Tailwind CSS v4는 PostCSS 기반 아키텍처에서 Rust 기반 엔진으로 마이그레이션하여 빌드 속도를 평균 3배 향상시켰습니다. CSS 변수 기반 설정 시스템으로 런타임 테마 전환을 지원하고, @layer 디렉티브 처리 방식을 개선하여 캐스케이드 제어를 강화했습니다.

v3까지는 JavaScript 설정 파일(tailwind.config.js)이 PostCSS 플러그인을 통해 CSS를 생성했으나, v4부터는 CSS 파일 내에서 @theme 디렉티브를 선언하는 방식으로 단순화됐습니다. 이를 통해 설정과 스타일 정의의 경계를 명확히 하고, 빌드 프로세스의 복잡도를 감소시켰습니다.

v3에서 v4로의 마이그레이션은 대부분 자동으로 처리되며, 기존 유틸리티 클래스의 출력값 변경은 최소화되어 하위 호환성을 유지합니다.

새로운 @theme 디렉티브는 어떻게 작동하나요?

@theme 디렉티브는 CSS 파일 상단에서 직접 디자인 토큰을 CSS 변수로 등록하는 메커니즘입니다. 기존 tailwind.config.js의 theme 객체를 CSS 형식으로 작성하여 브라우저 런타임에 변수값을 즉시 참조할 수 있게 합니다.

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #ef4444;
  --spacing-unit: 0.25rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
}

이 방식의 핵심 이점은 JavaScript 없이 CSS만으로 테마를 정의하며, 동적 테마 전환 시 JavaScript를 통해 CSS 변수값을 변경하면 모든 유틸리티가 즉시 반응합니다. 예를 들어 다크 모드 전환은 다음과 같이 동작합니다:

document.documentElement.style.setProperty('--color-primary', '#1e293b');

이는 전체 CSS 재파싱 없이 변수값만 업데이트하므로 리페인트 비용을 0.5ms 이하로 제한합니다. CSS Cascade Layers를 활용하여 @layer 순서를 명시적으로 제어하므로, 커스텀 스타일과 유틸리티 클래스 간 명확한 우선순위를 보장합니다.

Rust 기반 엔진이 성능에 어떤 영향을 미치나요?

v4의 코어 엔진을 Rust로 재작성하여 Tailwind CSS 파일 처리 속도를 다음과 같이 개선했습니다:

항목	v3 (Node.js/PostCSS)	v4 (Rust)	개선율
초기 빌드 시간	3.2초	0.8초	75% 단축
캐시된 상태 재빌드	420ms	85ms	80% 단축
파일 와치 응답 시간	350ms	40ms	89% 단축
메모리 사용량	280MB	45MB	84% 감소

Rust 엔진은 토큰 파싱, 정규표현식 매칭, 클래스 생성 과정을 네이티브 바이너리로 실행하므로 가비지 컬렉션 오버헤드가 없습니다. 멀티스레드 파일 처리로 대규모 프로젝트(10,000개 이상 컴포넌트)에서도 선형적 성능 저하를 방지합니다.

또한 증분 빌드 최적화로 변경된 파일만 재처리하므로, 1,000줄 규모의 CSS 파일 수정 시 전체 프로젝트 재생성 없이 해당 부분만 갱신됩니다.

색상 시스템의 변경점은 무엇인가요?

v4부터 색상 팔레트가 oklch 색 공간(Oklab 기반 원통 좌표)을 기본으로 채택했습니다. 기존 hex 기반 팔레트에서 perceptually uniform 색 공간으로 마이그레이션하여 명도 대비 일관성을 향상시켰습니다.

색상 공간	명도 범위	색감 왜곡도	v4 채택 여부
sRGB (hex)	0~1	높음	레거시만
HSL	0~100%	중간	미지원
Lab	0~100	낮음	보조
Oklch	0~1	매우 낮음	기본

oklch(0.5 0.1 200) 형식으로 명도(L), 채도(C), 색상(H)을 명시적으로 제어하므로, 동일한 명도의 색상들이 시각적으로 균등한 밝기를 유지합니다. 이는 다크 모드 팔레트 자동 생성 시 blue-500의 명도가 항상 ~50%로 유지되도록 보장하여, 색상 대비 표준(WCAG AA 4.5:1 이상)을 자동으로 충족합니다.

또한 @supports (color: oklch(0 0 0)) 쿼리를 통해 레거시 브라우저 대응을 동시에 지원하므로, IE 11을 제외한 모든 모던 브라우저(Chrome 111+, Firefox 113+, Safari 15.4+)에서 oklch 색상을 원본 그대로 렌더링합니다.

새로운 유틸리티 클래스는 어떤 기능을 추가했나요?

v4에서는 다음의 신규 유틸리티 클래스군을 도입했습니다:

애니메이션 및 전환 관련:

starting: @starting-style 규칙으로 초기 상태 정의 (Entry Animations API)
has-: :has() 선택자 기반 부모 상태 제어
group-data-: data-* 속성 기반 그룹 제어

레이아웃 관련:

scroll-start-*: scroll-start-x/y 속성 (스크롤 시작점 제어)
field-sizing: field-sizing: content로 input 필드 자동 리사이징
anchor-*: CSS Anchor Positioning으로 절대 위치 계산

타이포그래피:

text-wrap-balance: text-wrap: balance로 마지막 줄 단어 수 균등화
text-wrap-pretty: text-wrap: pretty로 orphan 방지

이들은 모두 CSS Working Group 최신 명세에 기반하며, 브라우저 지원도 90% 이상입니다.

브레이크포인트 처리는 어떻게 개선됐나요?

v4부터 동적 뷰포트 범위 기반 브레이크포인트를 지원합니다:

@media (width >= 768px) and (width < 1024px) {
  /* md 범위: 768px ~ 1023px */
}

v3의 min-width 기반 접근(@media (min-width: 768px))에서 범위 기반으로 변경하여, 동일 요소가 여러 브레이크포인트에 중복 적용되는 캐스케이드 문제를 제거했습니다. 결과적으로 생성되는 CSS 파일 크기를 평균 8~12% 단축하고, 미디어 쿼리 매칭 비용을 O(n)에서 O(1)로 개선했습니다.

또한 컨테이너 쿼리(@container)에서도 범위 기반 구문을 적용하여, 부모 컨테이너의 너비 범위에 따른 세밀한 레이아웃 제어를 가능하게 합니다.

자주 묻는 질문

v3에서 v4로 마이그레이션 시 기존 설정 파일을 모두 수정해야 하나요?

v4는 기존 tailwind.config.js 형식을 여전히 지원합니다. 다만 CSS 파일 내 @theme 디렉티브를 추가하면 더 나은 성능과 동적 테마 전환 기능을 활용할 수 있습니다. 단계적 마이그레이션이 가능하므로, 기존 프로젝트는 package.json 의존성만 업그레이드하고 점진적으로 @theme를 도입할 수 있습니다.

oklch 색 공간이 모든 브라우저에서 지원되나요?

oklch는 Chrome 111(2023년 3월), Firefox 113(2023년 4월), Safari 15.4(2022년 3월)에서 지원됩니다. IE 11을 포함한 레거시 환경은 tailwind.config.js의 corePlugins 옵션으로 hex 색상 폴백을 활성화할 수 있으며, 자동 폴백 생성 기능도 제공됩니다.

Rust 기반 엔진은 Node.js 버전에 의존하지 않나요?

Rust 엔진은 @tailwindcss/cli 패키지로 배포되는 독립 바이너리이며, Node.js 버전과 무관하게 동작합니다. Node.js 18 이상만 지원하는 것은 나머지 dev-dependency(PostCSS, Autoprefixer 등)의 요구사항이며, 핵심 CSS 컴파일 엔진은 플랫폼 독립적입니다.

생성되는 CSS 파일 크기는 얼마나 줄어들었나요?

범위 기반 브레이크포인트와 CSS 변수 기반 토큰 시스템으로 인해, 전형적인 중규모 프로젝트(100개 컴포넌트 기준)의 출력 CSS 크기는 v3 대비 815% 감소합니다. 예를 들어 v3에서 180KB였던 파일이 v4에서는 160KB 정도로 줄어듭니다. Gzip 압축 후에는 58% 개선 정도입니다.

기존 커스텀 플러그인이나 프리셋은 계속 동작하나요?

v4는 플러그인 API를 유지하므로, 기존 플러그인 대부분이 추가 수정 없이 동작합니다. 다만 PostCSS의 onceExit 훅이 변경된 경우, 마이그레이션 가이드에 따라 콜백 로직을 수정해야 합니다. Tailwind 공식 플러그인(forms, typography, ui 등)은 이미 v4 호환 버전이 배포되었습니다.

[작성자:] 정현우