Tailwind integráció

Két elem: egy tokenből generált preset (zephoraPreset) és egy headless mód (unstyled) minden komponensen.

Preset

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

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

A preset a Zephora tokeneket Tailwindbe képezi le: színskálák (primary-500…), térközök, lekerekítés, betűméretek sormagasságokkal, elevation árnyékok, mozgás időtartamok/easingek és z-index. Emellett témareaktív szemantikus színeket is elérhetővé tesz, amelyeket ugyanazok a CSS-változók támogatnak, mint amiket a stílusos komponensek használnak — bg-background, text-foreground, bg-accent, border-border, ring-ring —, így a Tailwind utility-k automatikusan követik az aktív témát.

Headless mód

Add át az unstyled propot, hogy eltávolítsd a Zephora stílusozását, miközben megtartod a viselkedést és az akadálymentességet. Utána stílusozz Tailwinddel:

<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

A Tailwind v4 CSS-first konfigurációval töltsd be a presetet a @config segítségével, vagy importáld a @zephora/tokens/css-t, és hivatkozz közvetlenül a nyers --z-* változókra a @theme-ben.