1장: Tailwind CSS v4 소개 — 패러다임의 전환
Tailwind CSS v4의 핵심 변경사항과 아키텍처 혁신을 조망합니다. Rust 기반 엔진, CSS-first 설정, 새로운 임포트 구조 등 v3에서 v4로의 패러다임 전환을 이해합니다.
·11분 읽기
Tailwind CSS v4의 핵심 변경사항과 아키텍처 혁신을 조망합니다. Rust 기반 엔진, CSS-first 설정, 새로운 임포트 구조 등 v3에서 v4로의 패러다임 전환을 이해합니다.
Tailwind CSS v4의 핵심 설정 방식인 @theme 디렉티브를 심층 분석합니다. 디자인 토큰 정의, 네임스페이스 규칙, 기본 테마 확장과 재정의 패턴을 다룹니다.
Tailwind CSS v4의 임포트 방식, CSS 레이어 시스템, @utility로 커스텀 유틸리티 정의하기, 그리고 스타일 우선순위 관리 전략을 다룹니다.
Tailwind CSS v4의 기본 색상 시스템인 OKLCH의 원리, 장점, 색상 팔레트 설계 방법, 그리고 투명도 수정자와 색상 조합 패턴을 실전 중심으로 다룹니다.
Tailwind CSS v4의 네이티브 컨테이너 쿼리 지원, @container 변형, 기존 미디어 쿼리와의 비교, 그리고 컴포넌트 기반 반응형 디자인 패턴을 다룹니다.
Tailwind CSS v4에서 추가, 변경, 제거된 유틸리티 클래스와 변형(Variants)을 종합 정리하고, 실전 활용 패턴을 다룹니다.
Tailwind CSS v4의 애니메이션 시스템, @keyframes 정의, @starting-style 활용, transition-behavior, 그리고 성능 최적화된 애니메이션 패턴을 다룹니다.
Tailwind CSS v4의 다크 모드 전략, CSS 커스텀 프로퍼티 기반 런타임 테마 전환, 다중 테마 패턴, 그리고 next-themes와의 통합을 실전 중심으로 다룹니다.
Tailwind CSS v4의 @custom-variant, @plugin 디렉티브, CSS 기반 확장 시스템, 그리고 기존 JS 플러그인에서의 마이그레이션을 실전 중심으로 다룹니다.
Tailwind CSS v4로 프로덕션 디자인 시스템을 구축합니다. 토큰 계층 설계, 컴포넌트 라이브러리, 테마 시스템, 접근성, 팀 협업 전략을 실전 중심으로 다룹니다.
Tailwind CSS v3에서 v4로의 마이그레이션 가이드 — 주요 변경사항, 자동 마이그레이션 도구, 단계별 전환 전략, 그리고 흔한 문제 해결법을 다룹니다.