스킬 자체의 표현으로
Tailwind CSS v4(2024년 이후)를 기반으로 프로덕션 수준의 디자인 시스템을 구축합니다. CSS 우선 구성 방식을 안내하며, app.css의 @theme가 tailwind.config.ts를 대체하고, OKLCH로 작성된 시맨틱 컬러 토큰, @theme 안에 키프레임이 위치한 radius 및 애니메이션 토큰, @custom-variant로 선언된 클래스 기반 다크 모드, @layer base에 적용된 기본 스타일을 다룹니다.
또한 브랜드에서 시맨틱, 컴포넌트 토큰으로 이어지는 토큰 위계, 기본 스타일·변형·크기·상태·오버라이드로 구성된 컴포넌트 아키텍처, 그리고 반응형이며 접근성을 갖춘 컴포넌트 패턴을 제시합니다. 컴포넌트 라이브러리를 만들거나, 코드베이스 전반의 UI 패턴을 표준화하거나, Tailwind v3에서 마이그레이션하는 팀을 위해 작성되었습니다.
작동 방식
- 01CSS 진입점에서 Tailwind 임포트하기
app.css는 v3의 @tailwind base/components/utilities 지시문 대신 단일 @import로 시작합니다.
- 02@theme 아래에 시맨틱 토큰 세트 선언하기
background, foreground, primary, secondary, muted, accent, destructive, border, ring, card는 모두 OKLCH로 컬러 토큰으로 선언됩니다.
- 03키프레임을 포함한 애니메이션 토큰 추가하기
--animate-fade-in과 --animate-fade-out은 0.2초, --animate-slide-in과 --animate-slide-out은 0.3초로 실행되며, 각각 @theme 안에 선언된 대응하는 @keyframes 블록을 가집니다.
- 04.dark 아래에서 동일한 토큰 이름 오버라이드하기
다크 블록은 새로운 이름을 도입하는 대신 모든 토큰을 재할당하며, background, foreground, primary, secondary, muted, accent, destructive, border, ring, card, ring-offset을 그대로 반영합니다.
- 05기본 레이어 값 설정하기
@layer base는 모든 요소에 border-border를 적용하고, body에 테마 배경, 전경색, 안티앨리어싱을 부여합니다.
- 06레이어 순서에 따라 컴포넌트 구축하기
컴포넌트는 기본 스타일, 변형, 크기, 상태, 오버라이드 순서로 진행됩니다.