Penyepaduan Tailwind

Dua bahagian: pratetap (preset) yang dijana daripada token (zephoraPreset) dan mod 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…), jarak, radius, saiz fon dengan ketinggian baris, bayang elevasi, tempoh/easing gerakan dan z-index. Ia juga mendedahkan warna semantik yang responsif terhadap tema, disokong oleh pemboleh ubah CSS yang sama seperti yang digunakan komponen bergaya — bg-background, text-foreground, bg-accent, border-border, ring-ring — supaya utiliti Tailwind mengikut tema aktif secara automatik.

Mod headless

Hantar unstyled untuk membuang gaya Zephora sambil mengekalkan tingkah laku dan kebolehcapaian. Kemudian gayakan 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 mengutamakan CSS Tailwind v4, muatkan preset melalui @config, atau import @zephora/tokens/css dan rujuk pemboleh ubah --z-* mentah secara langsung dalam @theme.