Intégration Tailwind

Deux éléments : un preset généré à partir des tokens (zephoraPreset) et un mode headless (unstyled) sur chaque composant.

Preset

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

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

Le preset mappe les tokens Zephora vers Tailwind : échelles de couleurs (primary-500…), espacements, rayons, tailles de police avec hauteurs de ligne, ombres d'élévation, durées/courbes d'animation et z-index. Il expose aussi des couleurs sémantiques réactives au thème, adossées aux mêmes variables CSS que celles utilisées par les composants stylés — bg-background, text-foreground, bg-accent, border-border, ring-ring — pour que les utilitaires Tailwind suivent automatiquement le thème actif.

Mode headless

Passez unstyled pour retirer le style Zephora tout en conservant le comportement et l'accessibilité. Puis stylez avec 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

Avec la configuration CSS-first de Tailwind v4, chargez le preset via @config, ou importez @zephora/tokens/css et référencez directement les variables brutes --z-* dans @theme.