Tailwind inteqrasiyası

İki hissə: token-lərdən yaradılan preset (zephoraPreset) və hər komponentdə headless rejim (unstyled).

Preset

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

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

Preset Zephora token-lərini Tailwind-ə uyğunlaşdırır: rəng şkalaları (primary-500…), boşluq, radius, sətir hündürlüklü şrift ölçüləri, elevation kölgələri, hərəkət müddətləri/easing-ləri və z-index. O həmçinin stilli komponentlərin istifadə etdiyi eyni CSS dəyişənlərinə əsaslanan temaya reaktiv semantik rəngləri açığa çıxarır — bg-background, text-foreground, bg-accent, border-border, ring-ring — beləliklə Tailwind utility-ləri aktiv temanı avtomatik izləyir.

Headless rejim

Davranışı və əlçatanlığı saxlayaraq Zephora stilini götürmək üçün unstyled ötürün. Sonra Tailwind ilə stilləndirin:

<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

Tailwind v4 CSS-öncəlikli konfiqurasiyada preset-i @config vasitəsilə yükləyin və ya @zephora/tokens/css-i idxal edib xam --z-* dəyişənlərinə birbaşa @theme içində istinad edin.