یکپارچگی با Tailwind

دو بخش: یک preset تولیدشده از token‌ها (zephoraPreset) و یک حالت headless (unstyled) روی هر کامپوننت.

Preset

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

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

این preset، token‌های Zephora را به Tailwind نگاشت می‌کند: مقیاس‌های رنگ (primary-500…)، فاصله‌گذاری، radius، اندازه‌های فونت همراه با line height، سایه‌های ارتفاع، مدت‌زمان‌ها/easing‌های حرکت و z-index. همچنین رنگ‌های سمانتیک واکنش‌گرا به تم را که با همان CSS variableهایی که کامپوننت‌های استایل‌دار استفاده می‌کنند پشتیبانی می‌شوند در دسترس قرار می‌دهد — bg-background، text-foreground، bg-accent، border-border، ring-ring — بنابراین utility‌های Tailwind به‌طور خودکار تم فعال را دنبال می‌کنند.

حالت headless

برای حذف استایل‌دهی Zephora ضمن حفظ رفتار و دسترس‌پذیری، unstyled را پاس دهید. سپس با 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

با پیکربندی CSS-first در Tailwind v4، preset را از طریق @config بارگذاری کنید، یا @zephora/tokens/css را import کرده و متغیرهای خام --z-* را مستقیماً در @theme ارجاع دهید.