Tailwind CSS v4.0가 24년 12월에 Beta 버전으로 릴리즈 되어 주목할 만한 변경사항을 정리해보았습니다.

한 줄 요약: Lightning CSS 도입으로 빌드 속도가 3배 이상 빨라졌으며, 컨피그 설정이 간소화되었고 새로운 CSS 클래스들이 추가됨.

새로운 고성능 엔진

Rust 기반의 Lightning CSS 도입을 통해 빌드 속도가 매우 빨라졌습니다. 자체 프로젝트에서 벤치마킹한 결과 전체 리빌드(full rebuild)는 3.5배 이상, 증분 빌드(Incremental rebuild)는 8배 이상 빨라졌습니다.

tailwind.config.js 대신 CSS에서 컨피그를 설정하도록 변경

Tailwind 설정을 이제 CSS 파일(ex: index.css)에서 모두 설정하도록 변경되었습니다. 새로운 프로젝트를 시작할 때 필요한 파일이 하나 줄어들어서 좋지만, 타입에 안전하지 않다는 단점이 있습니다. tailwind.config.js를 계속 사용하고 싶다면 CSS 파일에서 tailwind.config.js을 import해서 예전 방식으로 사용할 수 있습니다.

@config "../../tailwind.config.js";

CSS theme variables 지원

@theme에 정의한 모든 디자인 토큰들을 이제 CSS 변수로 자동으로 빌드해줍니다. 생성된 CSS 변수는 어디서든 손쉽게 var(--...) 형태로 참조할 수 있습니다. 따라서 동적 테마 변경, 라이브러리 연동(Motion 등), CSS 변수 표준 문법 활용이 간편해졌습니다.

빌트인 CSS 트랜스파일 제공

프로덕션용으로 빌드할 때 Tailwind CSS v4.0은 vendor prefixes, modern feature transpilation, minification 등을 처리하는 Lightning CSS를 통해 CSS를 자동으로 처리합니다. 이제 프로젝트에 postcss-preset-env, autoprefixer를 설치할 필요가 없게 되었습니다.

네이티브 CSS @layer 지원

기존에 PostCSS를 통해 지원하던 @layer 문법을 v4 부터는 브라우저 네이티브 문법을 통해 지원합니다.

참고로, @layer 문법은 Chrome 99, iOS 15.4 부터 지원됩니다.

자동 소스 감지

Tailwind CSS v3에서는 content 배열을 수동으로 구성해야 했었는데요. v4는 휴리스틱을 통해 모든 항목을 자동으로 감지하도록 변경되었습니다.

테마 설정 간소화

더 이상은 Tailwind에 없는 값이라고 해서 테마 설정에 수동으로 추가할 필요 없이 바로 클래스로 쓸 수 있습니다. 예를 들어, z-999, grid-cols-73 같은 값을 별도 테마 설정 없이 바로 클래스로 사용할 수 있다고 합니다.

그 외 새로 추가된 유틸리티 클래스, 기타 개선사항에 대한 내용은 아래 테일윈드 공식 문서를 참조해주세요.

https://tailwindcss.com/docs/v4-beta#whats-new-in-v4-0