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, ხაზის სიმაღლის მქონე font-ის ზომები, ამაღლების ჩრდილები, მოძრაობის ხანგრძლივობები/easing-ები და z-index. ის ასევე გამოააშკარავებს თემაზე რეაქტიულ სემანტიკურ ფერებს, რომლებიც სტილიზებული კომპონენტების იმავე CSS ცვლადებზე დგას — bg-background, text-foreground, bg-accent, border-border, ring-ring — ასე რომ Tailwind-ის utility-ები აქტიურ თემას ავტომატურად მიჰყვება.

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-ში.