Tích hợp Tailwind

Hai phần: một preset được tạo từ token (zephoraPreset) và chế độ headless (unstyled) trên mọi component.

Preset

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

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

Preset ánh xạ các token Zephora vào Tailwind: thang màu (primary-500…), khoảng cách, radius, cỡ chữ kèm chiều cao dòng, bóng độ cao, thời lượng/easing chuyển động và z-index. Nó cũng cung cấp các màu ngữ nghĩa phản ứng theo theme, dựa trên chính các biến CSS mà các component có style sử dụng — bg-background, text-foreground, bg-accent, border-border, ring-ring — nên các tiện ích Tailwind tự động bám theo theme đang hoạt động.

Chế độ headless

Truyền unstyled để loại bỏ style của Zephora trong khi vẫn giữ hành vi và khả năng truy cập. Sau đó tạo style bằng 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

Với cấu hình ưu tiên CSS của Tailwind v4, hãy nạp preset qua @config, hoặc import @zephora/tokens/css và tham chiếu trực tiếp các biến --z-* thô trong @theme.