Tailwind integrācija

Divas daļas: no token'iem ģenerēts preset (zephoraPreset) un headless režīms (unstyled) katrā komponentē.

Preset

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

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

Preset kartē Zephora token'us uz Tailwind: krāsu skalas (primary-500…), atstarpes, radius, fontu izmērus ar rindu augstumiem, pacēluma ēnas, kustības ilgumus/easing'us un z-index. Tas arī atklāj motīvam reaktīvas semantiskās krāsas, kuru pamatā ir tie paši CSS mainīgie, ko izmanto stilizētās komponentes — bg-background, text-foreground, bg-accent, border-border, ring-ring — tāpēc Tailwind utilītas automātiski seko aktīvajam motīvam.

Headless režīms

Padodiet unstyled, lai noņemtu Zephora stilizāciju, saglabājot uzvedību un pieejamību. Pēc tam stilizējiet ar 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

Ar Tailwind v4 CSS-first konfigurāciju ielādējiet preset caur @config vai importējiet @zephora/tokens/css un atsaucieties uz neapstrādātajiem --z-* mainīgajiem tieši @theme iekšpusē.