Tailwind CSS 4의 주요 변화
Tailwind CSS 4는 OKLCH 색상 시스템과 CSS 기반 설정을 도입했습니다.
OKLCH 색상 시스템
OKLCH는 인간의 색상 인지에 맞춰 설계된 색 공간입니다:
:root {
--color-primary: oklch(0.7 0.15 250);
--color-secondary: oklch(0.6 0.1 200);
}장점: HSL과 달리 밝기가 일정하게 유지되어 접근성 있는 색상 팔레트를 쉽게 만들 수 있습니다.
CSS 기반 설정
tailwind.config.js 대신 CSS에서 직접 설정합니다:
@import "tailwindcss";
@theme {
--color-brand: oklch(0.7 0.2 250);
--font-sans: "Inter", sans-serif;
}컴포넌트 패턴
cn() 유틸리티
clsx와 tailwind-merge를 조합한 클래스 병합 유틸리티:
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}CVA (Class Variance Authority)
컴포넌트 변형을 체계적으로 관리합니다:
import { cva } from "class-variance-authority";
const buttonVariants = cva("rounded-md font-medium transition-colors", {
variants: {
variant: {
default: "bg-primary text-white",
outline: "border border-primary text-primary",
},
size: {
sm: "px-3 py-1.5 text-sm",
md: "px-4 py-2 text-base",
},
},
defaultVariants: {
variant: "default",
size: "md",
},
});정리
- OKLCH 색상으로 접근성 있는 팔레트를 구성하세요
- CSS 기반 설정으로 빌드 시간을 단축하세요
cn()+ CVA 패턴으로 유지보수 가능한 컴포넌트를 만드세요