Tailwind integracija

Dva dela: preset, generiran iz tokenov (zephoraPreset), in headless način (unstyled) na vsaki komponenti.

Preset

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

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

Preset preslika Zephora tokene v Tailwind: barvne lestvice (primary-500…), spacing, radius, velikosti pisave z line heighti, sence elevacije, trajanja/easinge animacij in z-index. Prav tako izpostavi theme-reaktivne semantične barve, podprte z istimi CSS spremenljivkami, ki jih uporabljajo stilizirane komponente — bg-background, text-foreground, bg-accent, border-border, ring-ring — tako da Tailwind utility razredi samodejno sledijo aktivni temi.

Headless način

Podajte unstyled, da odstranite Zephora stilizacijo, hkrati pa ohranite vedenje in dostopnost. Nato stilizirajte s Tailwindom:

<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

S Tailwind v4 CSS-first konfiguracijo naložite preset prek @config ali uvozite @zephora/tokens/css in se neposredno sklicujte na surove --z-* spremenljivke v @theme.