การผสานรวมกับ 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, ขนาดฟอนต์พร้อมความสูงบรรทัด, เงายกระดับ, ระยะเวลา/easing ของการเคลื่อนไหว และ z-index อีกทั้งยังเปิดใช้สีเชิงความหมายที่ตอบสนองต่อธีม โดยอิงกับ CSS variables เดียวกับที่คอมโพเนนต์แบบมีสไตล์ใช้ — bg-background, text-foreground, bg-accent, border-border, ring-ring — ทำให้ยูทิลิตีของ 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 หรือ import @zephora/tokens/css แล้วอ้างอิงตัวแปร --z-* ดิบโดยตรงใน @theme