Integrating Vuetify v4 with TailwindCSS v4 in a Vite project

Context

Vuetify v3까지는 TailwindCSS와의 통합 시 스타일 충돌과 설정 복잡도가 높았다. Vuetify v4에서 CSS 레이어가 기본 활성화되면서 통합 난제를 해결할 수 있게 되었지만, 여전히 유틸리티 클래스 명칭 충돌(예: rounded-lg)과 CSS 레이어 순서 관리가 필요하다.

Technical Solution

• Vuetify 유틸리티 비활성화: SCSS 설정에서 $utilities: false 옵션으로 Vuetify의 자체 유틸리티 클래스 생성 중단, TailwindCSS 유틸리티로 완전 대체
• CSS 레이어 스택 정의: layers.scss 파일에서 vuetify-core → vuetify-components → vuetify-overrides → vuetify-utilities → tailwind → vuetify-final 순서로 @layer 명시하여 Vuetify 트랜지션 동작 보장
• 클래스명 충돌 해결: Vuetify의 rounded prop 클래스(.rounded-lg)에 CSS 변수 바인딩(border-radius: var(--radius-lg))으로 Tailwind의 동일 명칭 클래스와 값 구분
• TailwindCSS v4 Vite 플러그인 등록: @tailwindcss/vite 패키지로 tailwind.css 파일의 @theme, @utility 커스텀 지시어 처리
• 브레이크포인트 통일: SCSS 설정, Vuetify 설정, Tailwind @theme 지시어에서 동일한 브레이크포인트 값(sm: 400px 등) 정의하여 미디어 쿼리 일관성 확보
• Preflight CSS 스킵: Vuetify v4의 자체 리셋이 존재하므로 tailwind/preflight.css 임포트 제외

Impact

CSS 번들 크기 658.40 kB → 481.24 kB 감소(27%), gzip 압축 시 141.74 kB → 115.70 kB 감소(18%)

Key Takeaway

여러 CSS 프레임워크를 통합할 때 CSS 레이어 스택을 명시적으로 정의하고 유틸리티 클래스 생성을 한쪽에서만 담당하도록 제한하면, 명칭 충돌을 피하고 스타일 우선순위 예측 불가 문제를 원천 차단할 수 있다.