Integrasi Tailwind

Dua bagian: preset yang dihasilkan dari token (zephoraPreset) dan mode headless (unstyled) pada setiap komponen.

Preset

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

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

Preset memetakan token Zephora ke Tailwind: skala warna (primary-500…), spasi, radius, ukuran font dengan tinggi baris, bayangan elevasi, durasi/easing gerakan, dan z-index. Preset juga menyediakan warna semantik yang reaktif terhadap tema, didukung oleh variabel CSS yang sama dengan yang digunakan komponen bergaya — bg-background, text-foreground, bg-accent, border-border, ring-ring — sehingga utilitas Tailwind mengikuti tema aktif secara otomatis.

Mode headless

Berikan unstyled untuk menghapus gaya Zephora sambil mempertahankan perilaku dan aksesibilitas. Lalu tata dengan 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

Dengan konfigurasi CSS-first Tailwind v4, muat preset melalui @config, atau impor @zephora/tokens/css dan rujuk variabel mentah --z-* secara langsung di dalam @theme.