Tailwind интеграциясы

Екі бөлік: token-нан жасалған preset (zephoraPreset) және әр компоненттегі headless режим (unstyled).

Preset

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

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

Preset Zephora token-дерін Tailwind-ке салыстырады: түс скалалары (primary-500…), аралық (spacing), radius, жол биіктігі бар шрифт өлшемдері, биіктік көлеңкелері, қозғалыс ұзақтықтары/easing-тері және z-index. Сондай-ақ ол стильденген компоненттер қолданатын дәл сол CSS айнымалыларына негізделген тақырыпқа реактивті семантикалық түстерді ұсынады — bg-background, text-foreground, bg-accent, border-border, ring-ring — осылайша Tailwind утилиталары белсенді тақырыпты автоматты түрде қадағалайды.

Headless режим

Мінез-құлық пен қолжетімділікті сақтай отырып, Zephora стильдерін алып тастау үшін unstyled беріңіз. Содан кейін 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

Tailwind v4 CSS-first конфигурациясында preset-ті @config арқылы жүктеңіз немесе @zephora/tokens/css импорттап, шикі --z-* айнымалыларына @theme ішінде тікелей сілтеме жасаңыз.