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…), отстъпи, радиус, размери на шрифта с височини на редовете, сенки за 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.