التكامل مع Tailwind

جزآن: preset مُولَّد من الرموز (zephoraPreset) ووضع بلا واجهة (headless) (unstyled) على كل مكوّن.

Preset

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

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

يربط الـ preset رموز Zephora بـ Tailwind: مقاييس الألوان (primary-500…)، والتباعد، ونصف القطر، وأحجام الخطوط مع ارتفاعات الأسطر، وظلال الارتفاع، ومدد/تسارعات الحركة، وz-index. كما يوفّر ألوانًا دلالية متجاوبة مع السمة مدعومة بنفس متغيّرات CSS التي تستخدمها المكوّنات المنسّقة — bg-background، text-foreground، bg-accent، border-border، ring-ring — بحيث تتبع أدوات Tailwind السمة النشطة تلقائيًا.

الوضع بلا واجهة (headless)

مرّر unstyled لإزالة تنسيق Zephora مع الإبقاء على السلوك وإمكانية الوصول. ثم نسّق باستخدام 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

مع تهيئة Tailwind v4 ذات أولوية CSS، حمّل الـ preset عبر @config، أو استورد @zephora/tokens/css وأشِر إلى متغيّرات --z-* الخام مباشرة داخل @theme.