Tailwind v4 업그레이드 시 여러 핵심적인 변경사항과 고려사항이 있습니다. 첫째, PostCSS의 필요성이 달라졌습니다. Tailwind v4에서는 PostCSS 플러그인이 @tailwindcss/postcss 패키지로 분리되었고, 특정 기능이 자동으로 처리되어 기존 PostCSS 관련 의존성을 제거하고 Tailwind CLI로 전환하여 의존성을 간소화할 수 있습니다.
둘째, 주요 고려사항은 다음과 같습니다. * 클래스 제거 및 이름 변경: 많은 클래스가 변경되었으므로 수동 작업 대신 업그레이드 도구 사용이 필수적입니다. 저자의 경험상 도구는 수백 개의 파일 변경을 자동화하여 효율성을 높였습니다. * JavaScript 설정 파일 (tailwind.config.js) 사용 지양: 더 이상 권장되지 않으며, v4에서는 자동으로 감지되지 않습니다. 대신 디렉티브나 새로운 요소 수정자를 활용해야 합니다. * 새로운 기본값: 기본 테두리 색상, 포커스 링 등 새로운 기본값이 적용되어 시각적 차이가 발생할 수 있으며, 기존 설정을 유지하려면 수동 오버라이드가 필요합니다. * Diff 불가능성: 이번 메이저 버전 변경은 광범위하여 CSS 파일을 diff하여 변경 사항을 확인하기 어렵습니다. 따라서 시각적 QA를 통해 검증해야 합니다.
셋째, 업그레이드 도구 실행 시 Tailwind v4 설치, v3 참조 브랜치 사용, .scss 파일 확장자 변경, 콘텐츠 경로 수정 등의 준비가 필요합니다. 도구가 때때로 과도한 변경을 시도하기도 했지만, 전반적으로 대규모 변경 작업을 자동화하여 수동 검토 부담을 줄여주었습니다. package.json에는 @tailwindcss/cli 및 관련 플러그인 변경이 포함되었습니다. 마지막으로, 새로운 기본값 처리를 위해 application.css에 @layer base를 사용하여 이전 기본값을 오버라이드했습니다.