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-க்கு வரைபடமாக்குகிறது: color scales (primary-500…), spacing, radius, line height-களுடன் கூடிய font அளவுகள், elevation நிழல்கள், motion கால அளவுகள்/easing-கள் மற்றும் z-index. ஸ்டைல் செய்யப்பட்ட காம்பொனென்ட்கள் பயன்படுத்தும் அதே CSS மாறிகளை அடிப்படையாகக் கொண்ட theme-reactive semantic நிறங்களையும் இது வெளிப்படுத்துகிறது — bg-background, text-foreground, bg-accent, border-border, ring-ring — எனவே Tailwind utility-கள் செயலில் உள்ள தீமை தானாகவே பின்பற்றுகின்றன.

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-முதல் config-இல், preset-ஐ @config வழியாக ஏற்றுங்கள், அல்லது @zephora/tokens/css-ஐ இறக்குமதி செய்து மூல --z-* மாறிகளை நேரடியாக @theme-இல் குறிப்பிடுங்கள்.