Integrace s Tailwind

Dva prvky: preset generovaný z tokenů (zephoraPreset) a headless režim (unstyled) na každé komponentě.

Preset

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

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

Preset mapuje Zephora tokeny do Tailwindu: barevné škály (primary-500…), spacing, radius, velikosti písma s výškou řádku, stíny elevace, doby trvání/easingy animací a z-index. Vystavuje také sémantické barvy reagující na motiv, podložené stejnými CSS proměnnými, jaké používají stylované komponenty — bg-background, text-foreground, bg-accent, border-border, ring-ring — takže Tailwind utility automaticky sledují aktivní motiv.

Headless režim

Předejte unstyled, čímž odstraníte Zephora stylování a zachováte chování i přístupnost. Poté stylujte pomocí Tailwindu:

<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 CSS-first konfiguraci Tailwind v4 načtěte preset přes @config nebo importujte @zephora/tokens/css a odkazujte se na syrové proměnné --z-* přímo v @theme.