Tailwind 集成

两个部分：由 token 生成的预设（zephoraPreset）以及每个组件上的无头模式（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 工具类会自动跟随当前主题。

无头模式

传入 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-* 变量。