Tailwind CSS v4 업그레이드의 핵심은 PostCSS 사용 여부 재고, 대규모 클래스 변경에 대한 업그레이드 도구 활용, 그리고 JavaScript 설정 파일 사용 지양입니다. v4부터 PostCSS 플러그인은 @tailwindcss/postcss로 분리되며, 임포트 및 벤더 프리픽싱이 자동 처리되어 기존 PostCSS 의존성을 제거하고 Tailwind CLI로 전환할 수 있습니다. 수많은 클래스 변경은 수동 처리 대신 공식 업그레이드 도구 사용이 필수적이며, JS 설정 파일 대신 지시문이나 요소 수정자를 통한 설정이 권장됩니다. 또한, 기본 테두리 색상, 포커스 링 등 새로운 기본값에 대한 수동 조정이 필요합니다. 업그레이드 도구는 v4 설치, v3 브랜치, .scss 파일 .css 변경, 콘텐츠 경로 수정 후 실행해야 하며, package.json 업데이트가 수반됩니다.
Rails 애플리케이션 Tailwind CSS v4 업그레이드 가이드
Upgrading a Rails App to Tailwind v4 - HYBRD
작성자
Ruby on Rails 소식지
발행일
2025년 02월 09일
핵심 요약
- 1 이 글은 Rails 애플리케이션을 Tailwind CSS v4로 업그레이드하는 과정을 다루며, 저자의 4-6시간 경험을 공유합니다.
- 2 주요 변경 사항으로는 PostCSS 사용 여부, 클래스 이름 변경, JavaScript 설정 파일 사용 지양, 그리고 새로운 기본값 처리가 있습니다.
- 3 업그레이드 도구의 활용과 수동 조정이 필요함을 강조하며, Rails 앱 사용자에게 유용한 팁을 제공합니다.
도입
본 문서는 Rails 애플리케이션을 Tailwind CSS v4로 업그레이드하는 과정에서 저자가 겪은 경험과 주요 고려 사항을 상세히 설명합니다. 저자는 일반적으로 의존성 업그레이드를 신속히 진행하지만, Tailwind v4의 경우 몇 가지 패치 릴리스를 기다린 후 업그레이드를 시작했습니다. 약 4-6시간이 소요된 이번 업그레이드 경험은 특히 변경 사항 파악과 업그레이드 도구 사용법에 대한 어려움이 있었음을 밝히며, 유사한 환경의 사용자들에게 시간 절약에 도움이 되기를 희망합니다. 이 글은 PostCSS를 사용하는 Rails 앱에 가장 적합하며, 모든 사용자는 Tailwind 공식 업그레이드 가이드를 숙독할 것을 권장합니다.
결론
Rails 애플리케이션의 Tailwind CSS v4 업그레이드는 노력이 필요하지만, 저자는 과거 Bootstrap 업그레이드만큼 어렵지는 않다고 평가합니다. 이 글에서 제시된 PostCSS 전환, 업그레이드 도구 활용, JS 설정 파일 지양, 새로운 기본값 처리 등의 구체적인 팁들은 Rails 개발자들에게 실질적인 도움을 제공하여 성공적인 전환과 효율적인 CSS 관리를 가능하게 할 것입니다.