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, লাইন-হাইটসহ ফন্ট সাইজ, এলিভেশন শ্যাডো, মোশন সময়কাল/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 ইম্পোর্ট করে সরাসরি @theme-এর মধ্যে কাঁচা --z-* ভেরিয়েবল রেফারেন্স করুন।