Tailwind integracija

Dva dijela: preset generiran iz tokena (zephoraPreset) i headless način (unstyled) na svakoj komponenti.

Preset

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

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

Preset mapira Zephora tokene u Tailwind: skale boja (primary-500…), spacing, radius, veličine fonta s line height-ovima, sjene elevacije, trajanja/easinge animacija i z-index. Također izlaže theme-reaktivne semantičke boje oslonjene na iste CSS varijable koje koriste stilizirane komponente — bg-background, text-foreground, bg-accent, border-border, ring-ring — tako da Tailwind utility klase automatski prate aktivnu temu.

Headless način

Proslijedite unstyled da uklonite Zephora stilizaciju zadržavajući ponašanje i pristupačnost. Zatim stilizirajte pomoću Tailwinda:

<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

Sa Tailwind v4 CSS-first konfiguracijom, učitajte preset preko @config, ili importajte @zephora/tokens/css i referencirajte sirove --z-* varijable izravno u @theme.