tailwind css v4 주요 변경사항

Tailwind CSS v4의 주요 변경사항

1. CSS-first 설정 방식으로 변경
   • 기존: JavaScript 파일(tailwind.config.js)에서 대부분의 설정
   • 변경: CSS 파일에서 @theme 디렉티브를 사용하여 설정
2. 클래스 기반에서 데이터 속성 기반으로 변화
   • 기존: 클래스명을 직접 조합하여 스타일링
   • 변경: 데이터 속성 선택자([data-*])를 활용한 스타일링 권장
3. CSS 변수 중심 테마 시스템
   • 기존: 타입스크립트/자바스크립트 객체 내에서 테마 정의
   • 변경: CSS 변수를 통한 테마 정의 (예: --color-, --font-)
4. CSS import 문법 변경
   • 기존: @tailwind base; @tailwind components; @tailwind utilities;
   • 변경: @import "tailwindcss";

생기는 이슈사항

1. cva 라이브러리와의 불일치
   • class-variance-authority(cva)는 클래스 문자열 조합 방식으로 동작
   • Tailwind CSS v4는 데이터 속성 선택자 중심으로 변경됨
   • 이로 인해 cva에서 생성한 클래스가 v4에서 제대로 적용되지 않음
2. 스타일 처리 방식의 차이
   • 기존: variant를 기반으로 클래스명 조합 → HTML에 클래스 적용
   • 변경: HTML에 데이터 속성 추가 → CSS에서 데이터 속성 선택자로 스타일 적용
3. 선택자 우선순위의 변화
   • v4에서는 데이터 속성 선택자가 클래스 선택자보다 우선적으로 적용될 수 있음
   • 단순히 클래스만 추가하는 것으로는 원하는 스타일이 적용되지 않음

https://grok.com/share/bGVnYWN5_eb3efcc7-e478-4207-86c1-59e35b683858