Integracja z Tailwind

Dwa elementy: preset generowany z tokenów (zephoraPreset) oraz tryb headless (unstyled) w każdym komponencie.

Preset

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

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

Preset mapuje tokeny Zephora na Tailwind: skale kolorów (primary-500…), odstępy, promienie, rozmiary fontów z wysokościami linii, cienie elevacji, czasy trwania/easingi animacji oraz z-index. Udostępnia też reagujące na motyw kolory semantyczne oparte na tych samych zmiennych CSS, których używają stylowane komponenty — bg-background, text-foreground, bg-accent, border-border, ring-ring — dzięki czemu narzędzia Tailwind automatycznie podążają za aktywnym motywem.

Tryb headless

Przekaż unstyled, aby usunąć stylowanie Zephora, zachowując zachowanie i dostępność. Następnie stylizuj za pomocą 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

W konfiguracji CSS-first Tailwind v4 załaduj preset przez @config lub zaimportuj @zephora/tokens/css i odwołaj się do surowych zmiennych --z-* bezpośrednio w @theme.