Tailwind-integration

To dele: en token-genereret preset (zephoraPreset) og en headless-tilstand (unstyled) på hver komponent.

Preset

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

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

Presettet mapper Zephora-tokens til Tailwind: farveskalaer (primary-500…), spacing, radius, skriftstørrelser med linjehøjder, elevationsskygger, bevægelsesvarigheder/easings og z-index. Det eksponerer også temareaktive semantiske farver, der understøttes af de samme CSS-variabler, som de stylede komponenter bruger — bg-background, text-foreground, bg-accent, border-border, ring-ring — så Tailwind-utilities automatisk følger det aktive tema.

Headless-tilstand

Send unstyled for at fjerne Zephora-stylingen, mens adfærd og tilgængelighed bevares. Style derefter med 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

Med Tailwind v4's CSS-first-konfiguration indlæser du presettet via @config, eller importerer @zephora/tokens/css og refererer de rå --z-*-variabler direkte i @theme.