Tailwind CSS v4 심화 — 커스텀 디자인 시스템 구축

CSS 변수 기반 커스터마이징

Tailwind v4는 CSS 변수를 기본으로 사용하여 런타임 테마 전환이 가능합니다.

@theme {
  --color-primary: oklch(0.7 0.15 240);
  --color-secondary: oklch(0.6 0.12 300);
  --font-display: "Pretendard", sans-serif;
  --spacing-page: 2rem;
}

다크 모드

<div class="bg-white dark:bg-gray-900">
  <h1 class="text-primary dark:text-primary/80">제목</h1>
</div>

prefers-color-scheme를 자동으로 감지하거나 클래스 기반으로 전환합니다.