Integració amb Tailwind

Dues peces: un preset generat a partir de tokens (zephoraPreset) i un mode headless (unstyled) a cada component.

Preset

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

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

El preset mapeja els tokens de Zephora a Tailwind: escales de color (primary-500…), espaiat, radius, mides de font amb alçades de línia, ombres d'elevació, durades/easings de moviment i z-index. També exposa colors semàntics reactius al tema, basats en les mateixes variables CSS que fan servir els components amb estil — bg-background, text-foreground, bg-accent, border-border, ring-ring — de manera que les utilitats de Tailwind segueixen el tema actiu automàticament.

Mode headless

Passa unstyled per treure l'estil de Zephora mantenint el comportament i l'accessibilitat. Després aplica estils amb 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

Amb la configuració CSS-first de Tailwind v4, carrega el preset via @config, o importa @zephora/tokens/css i referencia les variables --z-* en cru directament a @theme.