Tailwind 통합

두 가지 요소: 토큰에서 생성된 프리셋(zephoraPreset)과 모든 컴포넌트의 헤드리스 모드(unstyled).

프리셋

// tailwind.config.js
import { zephoraPreset } from "@zephora/tailwind-preset";

export default {
  presets: [zephoraPreset],
  content: ["./src/**/*.{ts,tsx}"],
};

프리셋은 Zephora 토큰을 Tailwind에 매핑합니다: 색상 스케일(primary-500…), 간격, radius, 줄 높이가 포함된 폰트 크기, 고도(elevation) 그림자, 모션 지속 시간/easing, z-index. 또한 스타일이 적용된 컴포넌트가 사용하는 것과 동일한 CSS 변수를 기반으로 하는 테마 반응형 시맨틱 색상을 노출합니다 — bg-background, text-foreground, bg-accent, border-border, ring-ring — 따라서 Tailwind 유틸리티가 활성 테마를 자동으로 따릅니다.

헤드리스 모드

동작과 접근성을 유지하면서 Zephora 스타일을 제거하려면 unstyled를 전달하세요. 그런 다음 Tailwind로 스타일을 지정합니다:

<Button
  unstyled
  className="rounded-lg bg-accent px-4 py-2 text-accent-foreground hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
>
  Tailwind button
</Button>

Tailwind v4

Tailwind v4의 CSS 우선 구성에서는 @config로 프리셋을 로드하거나, @zephora/tokens/css를 가져와 원시 --z-* 변수를 @theme 안에서 직접 참조하세요.