Tailwind integracija

Dva dela: preset generisan iz tokena (zephoraPreset) i headless režim (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 sa line height-ovima, senke elevacije, trajanja/easinge animacija i z-index. Takođe izlaže theme-reaktivne semantičke boje oslonjene na iste CSS varijable koje koriste stilizovane komponente — bg-background, text-foreground, bg-accent, border-border, ring-ring — tako da Tailwind utility klase automatski prate aktivnu temu.

Headless režim

Prosledite unstyled da uklonite Zephora stilizaciju zadržavajući ponašanje i pristupačnost. Zatim stilizujte pomoću Tailwind-a:

<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 importujte @zephora/tokens/css i referencirajte sirove --z-* varijable direktno u @theme.