Tailwind.css 4.0 알아보자

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *Tailwind CSS 3.x 이하 버전 사용자 및 웹 개발자**
• 난이도: 중급(이미 Tailwind CSS 경험자 대상)

핵심 요약

• @import "tailwindcss"로 간결한 스타일시트 인포밍 가능
• shadow-md 등 클래스명이 더 세분화되어 직관적으로 변경됨
• 커스텀 색상 정의 방식이 tailwind.config.js → @theme CSS 변수로 이동

섹션별 세부 요약

1. Tailwind 4.0의 주요 변경 사항

• @import "tailwindcss" 단일 명령어로 기존 @tailwind base/components/utilities 3개 명령어 대체
• shadow-sm → shadow-md → shadow-lg 등 중간 단계 세분화로 디자인 일관성 향상
• JSX에서 커스텀 색상 적용 시 기존 방식으로는 색상이 적용되지 않음

2. 커스텀 색상 정의 방법 변경

• Tailwind 3.x 이전: tailwind.config.js에 colors 객체로 정의
• Tailwind 4.0 이후: globals.css 또는 .css 파일에서 @theme 블록 내 CSS 변수(--color-blue 등)로 정의
• CSS 변수 사용 시점: 런타임 즉시 반영 → 빌드 재실행 불필요

3. 개발자 경험 향상 기능

• CSS 변수 기반 커스텀 속성 관리 가능
• 색상, 간격, 반경 등 전역 설정값을 동적으로 수정 가능
• 공식 문서 미참조 시 삽질 시간 증가 → 공식 문서 반드시 확인 권장

결론

• Tailwind 4.0 마이그레이션 시 @theme 블록 내 CSS 변수를 사용해 커스텀 속성 정의
• 기존 tailwind.config.js 방식은 더 이상 지원되지 않음
• 공식 문서 참고 필수 → "왜 안되지?" 같은 삽질 방지