Tailwind 統合

2 つの要素があります: トークンから生成されるプリセット（zephoraPreset）と、すべてのコンポーネントに備わる headless モード（unstyled）です。

プリセット

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

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

プリセットは Zephora のトークンを Tailwind にマッピングします: カラースケール（primary-500…）、スペーシング、radius、行の高さ付きのフォントサイズ、elevation シャドウ、モーションの持続時間/イージング、そして z-index です。さらに、スタイル付きコンポーネントが使うのと同じ CSS 変数に裏打ちされた、テーマに反応するセマンティックカラーも公開します — bg-background、text-foreground、bg-accent、border-border、ring-ring — これにより Tailwind ユーティリティは自動的にアクティブなテーマに追従します。

Headless モード

unstyled を渡すと、挙動とアクセシビリティを保ったまま Zephora のスタイリングを取り除けます。その後 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 内で直接参照します。