Інтеграція з Tailwind

Дві частини: згенерований із токенів preset (zephoraPreset) і headless-режим (unstyled) у кожного компонента.

Preset

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

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

Preset зіставляє токени Zephora з Tailwind: колірні шкали (primary-500…), відступи, radius, розміри шрифту з висотою рядка, тіні elevation, тривалості/easing-функції анімацій та z-index. Він також надає реагуючі на тему семантичні кольори, що спираються на ті самі CSS-змінні, що й стилізовані компоненти — bg-background, text-foreground, bg-accent, border-border, ring-ring — тож утиліти Tailwind автоматично слідують за активною темою.

Headless-режим

Передайте unstyled, щоб прибрати стилізацію Zephora, зберігши поведінку та доступність. Потім стилізуйте за допомогою 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

У CSS-first конфігурації Tailwind v4 завантажте preset через @config або імпортуйте @zephora/tokens/css і звертайтеся до сирих змінних --z-* напряму в @theme.