tailwind CSS v4.0: 최신 웹 개발의 완벽한 게임 체인저 [번역글]

(siosio3103.medium.com)

10P by xguru 12시간전 | ★ favorite | 댓글 8개

v4.0의 가장 주요한 특징은 성능 개선 : 전체 빌드는 최대 5배, 증분 빌드는 100배 이상 빨라짐
CSS 우선 구성으로 패러다임의 전환 : tailwind.config.js 대신 CSS에서 직접 설정
@layer 를 사용한 스타일 우선순위 제어
@property 규칙으로 커스텀 속성 정의 가능
Color-Mix() 함수로 CSS 변수 및 currentColor를 포함한 모든 색상 값의 투명도를 조절
margin-left와 margin-right 대신 margin-inline 같은 논리적 속성으로 한번에 처리가능해져서 RTL 지원이 훨씬 간단해짐
설치 과정 단순화 : npm i tailwindcss @tailwindcss/postcss export default { plugins: ["@tailwindcss/postcss"],}; @import "tailwindcss"; 면 끝
자동 콘텐츠 감지 : 이제 .gitignore 및 이미지/비디오등 바이너리를 자동으로 무시하고, 관련 파일 자동 스캔. 예외를 위한 @source 지원
Vite Plugin 우선 지원
동적 유틸리티 생성으로 기존 설정에 존재하지 않는 값들을 바로 사용 가능
진화된 색상 시스템 : 전체 기본 색상 팔레트가 RGB에서 OKLCH로 업그레이드
Container Queries가 프레임워크에 내장됨
3D Transforms 지원과 향상된 그라디언트 추가
새로운 Variants와 Utilities 포함 : not-* , starting, inert, nth-*, descendant Variant 및 field-sizing, color-scheme, inset-shadow-* Utilities
예상보다 더 쉬운 마이그레이션 : 대부분의 변경 사항을 자동으로 업그레이드
tailwind가 그리는 큰 그림 : 단순한 프레임워크 업데이트를 넘어, CSS의 미래에 대한 과감한 도전
업그레이드해야만 할까요? : 신규 프로젝트라면 v4.0을 선택. 기존 프로젝트는 최신 브라우저 대상 서비스라면 쉽게 업그레이드 가능
결론 : tailwind CSS v4.0은 단순 진화가 아니라 혁명