Tailwind-integratie

Twee onderdelen: een uit tokens gegenereerde preset (zephoraPreset) en een headless modus (unstyled) op elke component.

Preset

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

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

De preset zet Zephora-tokens om naar Tailwind: kleurenschalen (primary-500…), spacing, radius, lettergroottes met regelhoogtes, elevatieschaduwen, bewegingsduren/-easings en z-index. Ook stelt het thema-reactieve semantische kleuren beschikbaar die gebaseerd zijn op dezelfde CSS-variabelen die de gestylede componenten gebruiken — bg-background, text-foreground, bg-accent, border-border, ring-ring — zodat Tailwind-utilities het actieve thema automatisch volgen.

Headless modus

Geef unstyled door om de Zephora-styling te verwijderen met behoud van gedrag en toegankelijkheid. Style vervolgens met 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

Met de CSS-first-configuratie van Tailwind v4 laadt u de preset via @config, of importeert u @zephora/tokens/css en verwijst u rechtstreeks naar de ruwe --z-* variabelen in @theme.