Tailwind-integration

Två delar: en token-genererad preset (zephoraPreset) och ett headless-läge (unstyled) på varje komponent.

Preset

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

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

Preseten mappar Zephora-tokens till Tailwind: färgskalor (primary-500…), spacing, radie, teckenstorlekar med radhöjder, elevationsskuggor, rörelsers varaktigheter/easings och z-index. Den exponerar även temareaktiva semantiska färger som backas upp av samma CSS-variabler som de stilade komponenterna använder — bg-background, text-foreground, bg-accent, border-border, ring-ring — så att Tailwind-utilities automatiskt följer det aktiva temat.

Headless-läge

Skicka unstyled för att ta bort Zephora-stilarna medan beteende och tillgänglighet behålls. Stila sedan med 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

Med Tailwind v4:s CSS-first-konfiguration laddar du preseten via @config, eller importerar @zephora/tokens/css och refererar de råa --z-*-variablerna direkt i @theme.