Integrácia s Tailwind

Dva prvky: preset generovaný z tokenov (zephoraPreset) a headless režim (unstyled) na každom komponente.

Preset

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

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

Preset mapuje Zephora tokeny do Tailwindu: farebné škály (primary-500…), spacing, radius, veľkosti písma s výškou riadku, tiene elevácie, doby trvania/easingy animácií a z-index. Vystavuje aj sémantické farby reagujúce na motív, podložené rovnakými CSS premennými, aké používajú štýlované komponenty — bg-background, text-foreground, bg-accent, border-border, ring-ring — takže Tailwind utility automaticky sledujú aktívny motív.

Headless režim

Odovzdajte unstyled, čím odstránite Zephora štýlovanie a zachováte správanie aj prístupnosť. Potom štýlujte pomocou Tailwindu:

<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

V CSS-first konfigurácii Tailwind v4 načítajte preset cez @config alebo importujte @zephora/tokens/css a odkazujte sa na surové premenné --z-* priamo v @theme.