Интеграция с 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.