Tailwind-Integration

Zwei Bausteine: ein aus Tokens generiertes Preset (zephoraPreset) und ein Headless-Modus (unstyled) auf jeder Komponente.

Preset

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

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

Das Preset bildet Zephora-Tokens auf Tailwind ab: Farbskalen (primary-500…), Abstände, Radius, Schriftgrößen mit Zeilenhöhen, Elevation-Schatten, Bewegungsdauern/-Easings und z-index. Es stellt außerdem theme-reaktive semantische Farben bereit, die auf denselben CSS-Variablen basieren, die auch die gestylten Komponenten verwenden — bg-background, text-foreground, bg-accent, border-border, ring-ring — sodass Tailwind-Utilities dem aktiven Theme automatisch folgen.

Headless-Modus

Übergeben Sie unstyled, um das Zephora-Styling zu entfernen und dabei Verhalten und Barrierefreiheit zu behalten. Stylen Sie dann mit 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

Mit der CSS-first-Konfiguration von Tailwind v4 laden Sie das Preset über @config oder importieren @zephora/tokens/css und referenzieren die rohen --z-* Variablen direkt in @theme.