Tailwind CSS v4가 2025년 1월 22일에 공식 출시되었으며, 여러 새로운 기능, 최적화, 그리고 CSS 우선 설정 방식으로의 전환을 도입했습니다. 예를 들어, Tailwind v4는 CSS에서 직접 설정을 정의하는 현대적인 방식을 강조하고, postcss.config.js를 @tailwindcss/postcss로 대체하여 통합 프로세스를 단순화했습니다.
현재 npx create-next-app@latest app-name --tailwind를 실행하면 Tailwind CSS v3.4.1로 프로젝트가 초기화됩니다. v4로 업그레이드하기 위해서는 다음과 같은 수동 단계가 필요합니다:
Tailwind CSS 프로젝트를 v3에서 v4로 업그레이드하는 방법을 안내합니다.Tailwind CSS v4.0은 프레임워크의 새로운 메이저 버전입니다.
호환성을 깨뜨리는 변경사항을 최소화하기 위해 노력했지만, 일부 업데이트가 필요합니다. 이 가이드는 v3에서 v4로 프로젝트를 업그레이드하는 데 필요한 모든 단계를 설명합니다.프로세스를 단순화하기 위해, 일반적인 프로젝트에서 이러한 변경사항의 대부분을 자동으로 처리할 수 있는 마이그레이션 도구를 개발했습니다.
$ npx @tailwindcss/upgrade
대부분의 프로젝트에서 업그레이드 도구는 의존성 업데이트, 설정 파일의 CSS 마이그레이션, 템플릿 파일의 변경사항 처리 등 전체 마이그레이션 프로세스를 자동화합니다.
업그레이드 도구는 Node.js 20 이상이 필요하므로, 실행하기 전에 환경이 업데이트되어 있는지 확인하세요.
새로운 브랜치에서 업그레이드 도구를 실행하는 것을 권장
합니다. 그런 다음 diff를 주의 깊게 검토하고 브라우저에서 프로젝트를 테스트하여 모든 변경사항이 올바른지 확인하세요. 복잡한 프로젝트에서는 일부 사항을 수동으로 조정해야 할 수 있지만, 도구는 어떤 경우에도 많은 시간을 절약해줄 것입니다.업그레이드 도구가 포착하지 못하는 다른 업데이트가 필요한 경우를 대비하여, v4의 모든 주요 변경사항을 검토하고 이해하는 것도 좋은 방법입니다.