Integrazione con Tailwind

Due elementi: un preset generato dai token (zephoraPreset) e una modalità headless (unstyled) su ogni componente.

Preset

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

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

Il preset mappa i token di Zephora in Tailwind: scale di colore (primary-500…), spaziature, raggi, dimensioni dei font con altezze di riga, ombre di elevazione, durate/curve del movimento e z-index. Espone inoltre colori semantici reattivi al tema, basati sulle stesse variabili CSS usate dai componenti con stile — bg-background, text-foreground, bg-accent, border-border, ring-ring — così le utility di Tailwind seguono automaticamente il tema attivo.

Modalità headless

Passa unstyled per rimuovere lo stile di Zephora mantenendo comportamento e accessibilità. Poi applica gli stili con 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

Con la configurazione CSS-first di Tailwind v4, carica il preset tramite @config, oppure importa @zephora/tokens/css e fai riferimento direttamente alle variabili grezze --z-* in @theme.