Tailwind integration

Two pieces: a token-generated preset (zephoraPreset) and a headless mode (unstyled) on every component.

Preset

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

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

The preset maps Zephora tokens into Tailwind: color scales (primary-500…), spacing, radius, font sizes with line heights, elevation shadows, motion durations/easings and z-index. It also exposes theme-reactive semantic colors backed by the same CSS variables the styled components use — bg-background, text-foreground, bg-accent, border-border, ring-ring — so Tailwind utilities follow the active theme automatically.

Headless mode

Pass unstyled to strip Zephora styling while keeping behavior and accessibility. Then style with 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

With Tailwind v4 CSS-first config, load the preset via @config, or import @zephora/tokens/css and reference the raw --z-* variables directly in @theme.