Tailwind CSS v4에서 달라진 것들

첫 빌드 돌리고 "뭐지?" 했다

Tailwind v4를 처음 돌렸을 때. 빠르다. 농담 아니고 CSS 빌드가 1.2초에서 0.15초로 줄었다. 8배 차이. Oxide 엔진이라고 불리는 걸 Rust로 새로 짰기 때문인데, JavaScript 엔진을 완전히 갈아엎은 거라 성능 차이가 클 수밖에 없다.

근데 빌드 속도보다 놀라운 변화가 있었다.

tailwind.config.js가 없다

이게 v4의 가장 큰 변화다. 설정 파일이 사라졌다. CSS 파일에서 직접 설정한다. @theme으로 디자인 토큰 정의하고, @plugin으로 플러그인 로드.

처음에는 "설정 파일이 왜 없어지지?" 싶었다. 근데 써보니까 편하다. 색상이나 폰트 바꾸고 싶을 때 CSS 파일만 열면 된다. 예전에는 config 열고, CSS 열고, 왔다 갔다 했는데 그게 없어졌다. (솔직히 config 파일 위치 까먹어서 찾아다닌 적도 있다.)

CSS 변수가 그냥 다 된다

v3에서는 Tailwind 색상을 CSS 변수로 쓰려면 세팅이 좀 필요했다. v4에서는 모든 디자인 토큰이 자동으로 CSS 변수로 나온다. --color-blue-500, --spacing-4 같은 변수를 그냥 갖다 쓰면 된다.

이게 다크모드 구현에서 진가를 발휘한다. @theme에서 --color-background: #ffffff; 정의하고, .dark에서 --color-background: #0a0a0a;로 덮어쓰면 끝. 별도의 darkMode 설정이 필요 없다. "설정을 줄여라"가 v4의 철학이고, CSS 변수가 그 핵심이다.

바로 써먹은 새 유틸리티들

text-wrap-balance는 텍스트 줄바꿈을 균등하게 해주는데, 블로그 제목이 한쪽으로 쏠리는 문제가 사라졌다. size-*는 w-*랑 h-*를 한 방에 설정할 수 있어서 아이콘 같은 정사각형 요소에 좋다. 컨테이너 쿼리용 @container도 정식으로 들어왔다. 카드 컴포넌트처럼 다양한 곳에 쓰이는 요소의 반응형 처리가 훨씬 쉬워졌다.

마이그레이션은 거의 자동이었다

npx @tailwindcss/upgrade 한 줄이면 대부분 변환된다. 내 블로그 기준 자동 변환 성공률이 한 95% 정도. 나머지는 커스텀 플러그인 관련이라 수동으로 고쳤다. v3에서 JavaScript로 만든 커스텀 유틸리티를 v4의 CSS 방식으로 바꾸는 데 시간이 좀 걸렸다. (이 부분에서 반나절 날렸는데, 커스텀 플러그인을 굳이 만들었어야 하나 후회가 됐다.)

번들은 알아서 줄었다

v3에서 28KB, v4에서 22KB. 특별히 뭘 한 건 아니고 새 엔진이 안 쓰는 유틸리티를 더 정확하게 걸러내서다. 22KB랑 28KB의 로딩 시간 차이를 사용자가 느낄 수 있냐고 물으면, 솔직히 못 느낀다. 근데 아무것도 안 했는데 줄었으니 좋은 거다.

아직 좀 아쉬운 점

서드파티 UI 라이브러리 호환성이 완벽하지 않다. shadcn/ui는 v4 공식 지원하지만, 다른 라이브러리들은 v3 기반이라 클래스 충돌이 가끔 생긴다. 그리고 커뮤니티 리소스가 아직 v3 문법인 경우가 많다. 구글에서 해결법 찾으면 v3인 경우가 태반이라 v4로 변환하는 과정이 필요하다. 이건 시간이 해결해줄 문제이긴 하다.

새 프로젝트는 v4로 시작해라

v4는 진짜 의미 있는 업그레이드다. 설정 파일 제거, CSS 변수 네이티브, 빌드 속도. DX가 확실히 올라갔다. v3에 만족하고 있어도 새 프로젝트는 v4로 시작하는 걸 권한다. 써보면 v3로 안 돌아가게 된다. 나도 그랬다.