Tailwind integracija

Dvi dalys: iš token'ų sugeneruotas preset'as (zephoraPreset) ir headless režimas (unstyled) kiekviename komponente.

Preset'as

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

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

Preset'as susieja Zephora token'us su Tailwind: spalvų skales (primary-500…), tarpus, radius, šrifto dydžius su eilučių aukščiais, aukščio (elevation) šešėlius, judesio trukmes/easing'us ir z-index. Jis taip pat pateikia temai reaguojančias semantines spalvas, paremtas tais pačiais CSS kintamaisiais, kuriuos naudoja stilizuoti komponentai — bg-background, text-foreground, bg-accent, border-border, ring-ring — todėl Tailwind pagalbinės klasės automatiškai seka aktyvią temą.

Headless režimas

Perduokite unstyled, kad pašalintumėte Zephora stilizavimą, išsaugodami elgseną ir prieinamumą. Tada stilizuokite su Tailwind:

<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

Su Tailwind v4 CSS pirmumo konfigūracija įkelkite preset'ą per @config arba importuokite @zephora/tokens/css ir naudokite neapdorotus --z-* kintamuosius tiesiogiai @theme viduje.