אינטגרציה עם 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, גדלי גופן עם גובה שורות, צללי גובה (elevation), משכי ואסינג של תנועה ו-z-index. הוא גם חושף צבעים סמנטיים מגיבים לערכת הנושא הנשענים על אותם משתני CSS שהרכיבים המעוצבים משתמשים בהם — bg-background, text-foreground, bg-accent, border-border, ring-ring — כך ש-utilities של 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

עם תצורת CSS-first של Tailwind v4, טענו את ה-preset דרך @config, או ייבאו את @zephora/tokens/css והפנו ישירות אל משתני --z-* הגולמיים בתוך @theme.