Tailwind CSS v4 마이그레이션 후기

왜 v4로 올렸나

이 블로그를 만들면서 처음부터 Tailwind v4를 사용했지만 회사 프로젝트는 아직 v3이었습니다. v4의 새로운 기능들이 매력적이라 마이그레이션을 결심했습니다.

주요 변경점

가장 큰 변화는 설정 방식입니다.tailwind.config.js 대신 CSS 파일 안에서 @theme 블록으로 디자인 토큰을 정의하고 플러그인도 @plugin 지시어로 가져옵니다.

또한 @import "tailwindcss" 한 줄로 모든 레이어를 불러올 수 있어서 기존의 @tailwind base/components/utilities 패턴이 사라졌습니다.

삽질 포인트

• 커스텀 색상 변수: CSS 변수로 정의한 색상을 @theme inline에서 매핑해야 Tailwind 클래스로 사용 가능
• Typography 플러그인: @plugin "@tailwindcss/typography"로 변경
• container 클래스: v4에서 자동 센터링이 빠져서 직접 CSS로 정의해야 함

결론

v4는 설정이 훨씬 깔끔해졌습니다. CSS-native한 방향으로 발전하고 있어서 좋았습니다. 다만 기존 v3 프로젝트의 마이그레이션은 설정 파일을 꼼꼼히 옮겨야 해서 시간이 좀 걸립니다.