@zephora/tailwind-preset

Tailwind CSS preset generated from Zephora UI design tokens. Maps colors, spacing, radius, typography, shadows, motion and z-index into Tailwind — and exposes theme-reactive semantic colors backed by the same --z-* variables the components use, so Tailwind utilities follow the active theme automatically.

Install

npm install -D @zephora/tailwind-preset

Usage

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

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

Then style Zephora's headless components (unstyled) with Tailwind:

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

Theme-reactive utilities include bg-background, text-foreground, bg-accent, border-border, ring-ring — they resolve to the active theme's variables.

Tailwind v4

Load the preset via @config, or import @zephora/tokens/css and reference the raw --z-* variables directly in @theme.

Documentation

zephoraui.com/tailwind

License

MIT