Tailwind 整合

兩個部分：由 token 產生的預設集（zephoraPreset），以及每個元件上的 headless 模式（unstyled）。

預設集

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

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

預設集將 Zephora token 對應到 Tailwind：色階（primary-500…）、間距、圓角、含行高的字型大小、高度陰影、動態時長／緩動與 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 並直接在 @theme 中引用原始的 --z-* 變數。