Tailwind CSS 패턴 (v4 - 2025)은(는) 무엇을 하나요?
CSS 네이티브 구성을 사용하는 현대적인 유틸리티 우선 CSS.
1. Tailwind v4 아키텍처
v3에서 변경된 사항
| v3 (레거시) | v4 (현재) |
|---|
tailwind.config.js | CSS 기반 @theme 지시어 |
| PostCSS 플러그인 | Oxide 엔진 (10배 빠름) |
| JIT 모드 | 네이티브, 항상 활성화 |
| 플러그인 시스템 | CSS 네이티브 기능 |
@apply 지시어 | 여전히 작동하지만 권장되지 않음 |
v4 핵심 개념
| 개념 | 설명 |
|---|
| CSS-first | JavaScript가 아닌 CSS에서 구성 |
| Oxide 엔진 | Rust 기반 컴파일러, 훨씬 빠름 |
| 네이티브 중첩 | PostCSS 없이 CSS 중첩 사용 |
| CSS 변수 | 모든 토큰이 --* 변수로 노출됨 |
2. CSS 기반 구성
테마 정의
@theme {
--color-primary: oklch(0.7 0.15 250);
--color-surface: oklch(0.98 0 0);
--color-surface-dark: oklch(0.15 0 0);
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
확장(Extend) vs 재정의(Override)
| 동작 | 사용 시점 |
|---|
| 확장 | 기본값과 함께 새 값을 추가할 때 |
| 재정의 | 기본 스케일 전체를 교체할 때 |
| 의미 토큰 | 프로젝트별 이름 지정 (primary, surface) |
3. 컨테이너 쿼리 (v4 네이티브)
중단점(Breakpoint) vs 컨테이너
| 유형 | 반응 대상 |
|---|
중단점 (md:) | 뷰포트 너비 |
컨테이너 (@container) | 부모 요소 너비 |
컨테이너 쿼리 사용법
| 패턴 | 클래스 |
|---|
| 컨테이너 정의 | 부모에 @container |
| 컨테이너 중단점 | 자식에 @sm:, @md:, @lg: |
| 이름 있는 컨테이너 | 특정성을 위해 @container/card |
사용 시점
| 시나리오 | 사용 |
|---|
| 페이지 수준 레이아웃 | 뷰포트 중단점 |
| 컴포넌트 수준 반응형 | 컨테이너 쿼리 |
| 재사용 가능한 컴포넌트 | 컨테이너 쿼리 (컨텍스트 독립적) |
4. 반응형 디자인
중단점 시스템
| 접두사 | 최소 너비 | 대상 |
|---|
| (없음) | 0px | 모바일 우선 기본 |
sm: | 640px | 대형 폰 / 소형 태블릿 |
md: | 768px | 태블릿 |
lg: | 1024px | 노트북 |
xl: | 1280px | 데스크탑 |
2xl: | 1536px | 대형 데스크탑 |
모바일 우선 원칙
- 접두사 없이 모바일 스타일 먼저 작성
- 접두사를 사용하여 더 큰 화면 재정의 추가
- 예시:
w-full md:w-1/2 lg:w-1/3
5. 다크 모드
구성 전략
| 방법 | 동작 | 사용 시점 |
|---|
class | .dark 클래스 전환 | 수동 테마 전환 |
media | 시스템 설정 따름 | 사용자 제어 불필요 |
selector | 사용자 지정 선택자 (v4) | 복잡한 테마 |
다크 모드 패턴
| 요소 | 라이트 | 다크 |
|---|
| 배경 | bg-white | dark:bg-zinc-900 |
| 텍스트 | text-zinc-900 | dark:text-zinc-100 |
| 테두리 | border-zinc-200 | dark:border-zinc-700 |
6. 현대 레이아웃 패턴
Flexbox 패턴
| 패턴 | 클래스 |
|---|
| 양쪽 축 중앙 정렬 | flex items-center justify-center |
| 세로 스택 | flex flex-col gap-4 |
| 가로 행 | flex gap-4 |
| 사이 공간 벌리기 | flex justify-between items-center |
| 줄바꿈 그리드 | flex flex-wrap gap-4 |
그리드 패턴
| 패턴 | 클래스 |
|---|
| 자동 맞춤 반응형 | grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] |
| 비대칭 (벤토) | grid grid-cols-3 grid-rows-2 + span |
| 사이드바 레이아웃 | grid grid-cols-[auto_1fr] |
참고: 대칭형 3열 그리드보다 비대칭형/벤토 레이아웃을 선호합니다.
7. 현대 색상 시스템
OKLCH vs RGB/HSL
| 형식 | 장점 |
|---|
| OKLCH | 지각적으로 균일, 디자인에 더 적합 |
| HSL | 직관적인 색상/채도 |
| RGB | 레거시 호환성 |
색상 토큰 아키텍처
| 계층 | 예시 | 목적 |
|---|
| 원시 | --blue-500 | 원시 색상 값 |
| 의미 | --color-primary | 목적 기반 명명 |
| 컴포넌트 | --button-bg | 컴포넌트별 |
8. 타이포그래피 시스템
글꼴 스택 패턴
| 유형 | 권장 |
|---|
| 산세리프 | 'Inter', 'SF Pro', system-ui, sans-serif |
| 고정폭 | 'JetBrains Mono', 'Fira Code', monospace |
| 디스플레이 | 'Outfit', 'Poppins', sans-serif |
글자 크기 스케일
| 클래스 | 크기 | 용도 |
|---|
text-xs | 0.75rem | 레이블, 캡션 |
text-sm | 0.875rem | 보조 텍스트 |
text-base | 1rem | 본문 텍스트 |
text-lg | 1.125rem | 리드 텍스트 |
text-xl+ | 1.25rem+ | 제목 |
9. 애니메이션 및 전환
내장 애니메이션
| 클래스 | 효과 |
|---|
animate-spin | 지속 회전 |
animate-ping | 주목 펄스 |
animate-pulse | 미묘한 불투명도 펄스 |
animate-bounce | 바운스 효과 |
전환 패턴
| 패턴 | 클래스 |
|---|
| 모든 속성 | transition-all duration-200 |
| 특정 속성 | transition-colors duration-150 |
| 이징 포함 | ease-out 또는 ease-in-out |
| 호버 효과 | hover:scale-105 transition-transform |
10. 컴포넌트 추출
추출 시점
| 신호 | 동작 |
|---|
| 동일한 클래스 조합 3회 이상 | 컴포넌트 추출 |
| 복잡한 상태 변형 | 컴포넌트 추출 |
| 디자인 시스템 요소 | 추출 + 문서화 |
추출 방법
| 방법 | 사용 시점 |
|---|
| React/Vue 컴포넌트 | 동적, JS 필요 |
| CSS의 @apply | 정적, JS 불필요 |
| 디자인 토큰 | 재사용 가능한 값 |
11. 안티 패턴
| 하지 말 것 | 할 것 |
|---|
| 모든 곳에서 임의 값 사용 | 디자인 시스템 스케일 사용 |
!important | 특정성을 올바르게 수정 |
인라인 style= | 유틸리티 사용 |
| 긴 클래스 리스트 중복 | 컴포넌트 추출 |
| v3 구성과 v4 혼용 | 완전히 CSS-first로 마이그레이션 |
@apply 과도하게 사용 | 컴포넌트 선호 |
12. 성능 원칙
| 원칙 | 구현 |
|---|
| 사용하지 않는 CSS 제거 | v4에서 자동 |
| 동적 사용 피하기 | 템플릿 문자열 클래스 사용 금지 |
| Oxide 사용 | v4에서 기본, 10배 빠름 |
| 빌드 캐싱 | CI/CD 캐싱 |
기억하세요: Tailwind v4는 CSS-first입니다. CSS 변수, 컨테이너 쿼리, 네이티브 기능을 활용하세요. 이제 구성 파일은 선택 사항입니다.