Tailwind CSS v4.0 특징 분석

특징

• full build 5배 빨라짐
• incremental build 100배 빨라짐
• 모던 웹을 위한 설계 (최신 CSS 기능들)
• 의존성 최소화
• zero configuration
• CSS 파일에 한줄만 넣으면 됨
• 설치가 아주 간단한 Vite 전용 플러그인
• 추가 설정 없이도 템플릿 파일들을 자동으로 식별
• CSS 간 import 기능을 자체 제공
• js 설정을 통하지 않고 CSS에 직접 여러 설정을 할 수 있어 DX를 일신
• 사용자의 CSS 변수를 기본(native) CSS 변수처럼 이용
• 미리 정의하지 않아도 동적(dynamic, arbitrary)으로 값이나 variant를 이용할 수 있음
• 기본 컬러값을 모던하게 조정
• 컨테이너 쿼리(Container queries)를 빌트인함
• 3D 관련 variant를 많이 제공
• CSS를 통한 방사형/원뿔형 그라디언트, 보간 모드 등에 대한 API
• @starting-style 이라는 새로운 CSS 기능(트랜지션 시작/끝 관련)을 미리 제공
• not-* 이라는 새로운 CSS 기능에 대한 variant 제공
• 다양한 variant 신규 제공

 

비고

v4의 가장 큰 변경점은 boilerplate의 최소화라고 볼 수 있다. 설정 최소화, 의존성 최소화 등을 통해 사용 편의성이 월등해진 걸로 보인다. 특히 Vite 플러그인은 정말 간편하다. tailwind.config.js를 deprecate시키고 CSS와 통합한 것도 훌륭한 변화다.

그 외 빌드 속도 개선, 편의기능 추가, 각종 variant 추가 등도 주목할만하다.

 

레퍼런스

아래 사이트 내용에 대한 분석임

Tailwind CSS v4.0

 

사족

굳이 분석글을 쓴 이유는 Tailwind를 내 실습 프로젝트에 처음 써보려고 GPT에 물어보면서 세팅을 했는데 계속 에러가 났다. 알고보니, v4로 버전업된 걸 GPT가 알지 못해서 옛날 설정법만 알려주는 거다. 그래서, 내가 직접 분석했다. GPT에 너무 의존하면 안좋다는 걸 새삼 깨달았다.