Integración con Tailwind

Dos piezas: un preset generado a partir de los tokens (zephoraPreset) y un modo headless (unstyled) en cada componente.

Preset

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

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

El preset mapea los tokens de Zephora a Tailwind: escalas de color (primary-500…), espaciado, radios, tamaños de fuente con alturas de línea, sombras de elevación, duraciones/curvas de movimiento y z-index. También expone colores semánticos reactivos al tema, respaldados por las mismas variables CSS que usan los componentes con estilo — bg-background, text-foreground, bg-accent, border-border, ring-ring — para que las utilidades de Tailwind sigan automáticamente el tema activo.

Modo headless

Pasa unstyled para eliminar el estilo de Zephora conservando el comportamiento y la accesibilidad. Luego aplica estilos 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 configuración CSS-first de Tailwind v4, carga el preset mediante @config, o importa @zephora/tokens/css y referencia directamente las variables --z-* sin procesar en @theme.