tailwindcss 4.0 무엇이 달라졌나

tailwindcss가 나온뒤로는 bootstrap을 사용하지 않고 tailwindcss만 사용하고 있는데요. 이번에 4.0이 나왔습니다.

Tailwind CSS v4.0은 빌드 성능을 크게 높이고, 최신 웹 표준에 최적화된 기능들을 통합함으로써 더 가볍고 빠르며, 설정 과정도 간소화되었습니다. 특히 CSS 중심의 설정, 동적 유틸리티 강화, 3D 트랜스폼, 컨테이너 쿼리 지원 등이 개발 생산성을 크게 향상시켜 줄 것으로 기대되는데요. 기존에 비해 달라진 내용을 정리한 글이 있어서 소개드립니다.

1. 새로워진 고성능 엔진

• 전체 빌드 속도 최대 5배, 증분 빌드는 100배 이상 향상

• 사용 빈도가 높은 기존 클래스 재빌드 속도가 크게 빨라 실무 생산성 증가

2. 현대적 웹 표준 및 개발 흐름 최적화

• IE11 지원 중단으로 코드 간소화 및 성능 개선

• 최신 CSS(레이어, 커스텀 속성, color-mix 등)를 적극 활용

• 구형 브라우저 폴리필 제거로 빌드 파일 크기 감소

3. 설치 및 통합 간소화

• 한 줄 CSS(@import "tailwindcss")만으로 즉시 사용 가능

• vite-plugin-tailwind로 Vite 통합을 자동화

• 자동 콘텐츠 감지로 템플릿 경로 설정 최소화

4. CSS 중심 설정 및 디자인 토큰

• JS 설정(tailwind.config.js) 대신 CSS에서 직접 테마(@theme) 정의 가능

• 모든 디자인 토큰이 CSS 변수로 노출되어 런타임 제어 및 재사용이 용이

5. 동적 유틸리티와 P3 색상

• 임의 값 지원 확대 및 변형(variants) 방식 개선으로 유틸리티 클래스 활용 폭 증가

• OKLCH·P3 기반 색상으로 더 생동감 있는 표현 가능

6. 컨테이너 쿼리와 3D 변환

• 컨테이너 쿼리가 기본 제공되어, 뷰포트가 아닌 부모 컨테이너 크기 기준으로 스타일 조정

• 3D 트랜스폼(rotate-x, rotate-y, translate-z 등) 유틸리티 추가

7. 확장된 그래디언트 및 기타 신기능

• 각도·색상 보간 모드 지원 등 그래디언트 API 확장

• @starting-style과 starting: 변형으로 첫 렌더링 시 애니메이션 제어

• not-* 변형 등 새로운 유틸리티로 세밀한 스타일 조건 부여

https://velog.io/@oneook/tailwindcss-4.0-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%AC%EB%9D%BC%EC%A1%8C%EB%82%98%EC%9A%94