Tailwind entegrasyonu

İki parça: token'lardan üretilen bir preset (zephoraPreset) ve her bileşende headless mod (unstyled).

Preset

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

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

Preset, Zephora token'larını Tailwind'e eşler: renk skalaları (primary-500…), boşluk, radius, satır yükseklikli font boyutları, yükseklik gölgeleri, hareket süreleri/easing'leri ve z-index. Ayrıca stillenmiş bileşenlerin kullandığı aynı CSS değişkenlerine dayalı temaya duyarlı semantik renkler sunar — bg-background, text-foreground, bg-accent, border-border, ring-ring — böylece Tailwind yardımcı sınıfları aktif temayı otomatik izler.

Headless mod

Davranışı ve erişilebilirliği korurken Zephora stillerini kaldırmak için unstyled geçin. Sonra Tailwind ile stillendirin:

<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 öncelikli yapılandırmada preset'i @config ile yükleyin ya da @zephora/tokens/css'i içe aktarıp ham --z-* değişkenlerini doğrudan @theme içinde kullanın.