Tailwind-integrasjon

To deler: en token-generert preset (zephoraPreset) og en headless-modus (unstyled) på hver komponent.

Preset

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

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

Preseten mapper Zephora-tokens til Tailwind: fargeskalaer (primary-500…), spacing, radius, skriftstørrelser med linjehøyder, elevasjonsskygger, bevegelsesvarigheter/easings og z-index. Den eksponerer også temareaktive semantiske farger som støttes av de samme CSS-variablene de stilte komponentene bruker — bg-background, text-foreground, bg-accent, border-border, ring-ring — slik at Tailwind-utilities automatisk følger det aktive temaet.

Headless-modus

Send unstyled for å fjerne Zephora-stilingen mens atferd og tilgjengelighet beholdes. Stil deretter 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 v4s CSS-first-konfigurasjon laster du preseten via @config, eller importerer @zephora/tokens/css og refererer de rå --z-*-variablene direkte i @theme.