Tailwind एकीकरण

दो हिस्से: token से उत्पन्न एक preset (zephoraPreset) और हर कंपोनेंट पर एक headless मोड (unstyled)।

Preset

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

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

preset, Zephora token को Tailwind में मैप करता है: रंग स्केल (primary-500…), स्पेसिंग, radius, लाइन हाइट के साथ फ़ॉन्ट आकार, elevation शैडो, मोशन अवधि/easing और z-index। यह उन्हीं CSS वेरिएबल्स पर आधारित थीम-प्रतिक्रियाशील सिमेंटिक रंग भी प्रदान करता है जिन्हें स्टाइल किए गए कंपोनेंट उपयोग करते हैं — bg-background, text-foreground, bg-accent, border-border, ring-ring — ताकि 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

Tailwind v4 CSS-प्रथम कॉन्फ़िग के साथ, preset को @config के ज़रिए लोड करें, या @zephora/tokens/css इम्पोर्ट करके कच्चे --z-* वेरिएबल्स को सीधे @theme में संदर्भित करें।