Integrare Tailwind

Două piese: un preset generat din tokenuri (zephoraPreset) și un mod headless (unstyled) pe fiecare componentă.

Preset

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

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

Preset-ul mapează tokenurile Zephora în Tailwind: scale de culori (primary-500…), spațiere, radius, dimensiuni de font cu înălțimi de rând, umbre de elevație, durate/easing-uri de mișcare și z-index. Expune și culori semantice reactive la temă, susținute de aceleași variabile CSS pe care le folosesc componentele stilizate — bg-background, text-foreground, bg-accent, border-border, ring-ring — astfel încât utilitarele Tailwind urmează automat tema activă.

Mod headless

Transmite unstyled pentru a elimina stilizarea Zephora păstrând comportamentul și accesibilitatea. Apoi stilizează cu 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

Cu configurația CSS-first din Tailwind v4, încarcă preset-ul prin @config, sau importă @zephora/tokens/css și referențiază direct variabilele brute --z-* în @theme.