Tailwind-integraatio

Kaksi osaa: tokeneista generoitu preset (zephoraPreset) ja headless-tila (unstyled) jokaisessa komponentissa.

Preset

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

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

Preset mäppää Zephora-tokenit Tailwindiin: väriskaalat (primary-500…), välistykset, radiukset, fonttikoot rivikorkeuksineen, korkeusvarjot, liikkeen kestot/easingit ja z-indeksin. Se tarjoaa myös teemaan reagoivia semanttisia värejä, jotka nojaavat samoihin CSS-muuttujiin kuin styled-komponentit — bg-background, text-foreground, bg-accent, border-border, ring-ring — joten Tailwind-utilityt seuraavat aktiivista teemaa automaattisesti.

Headless-tila

Anna unstyled poistaaksesi Zephoran tyylit säilyttäen samalla toiminnan ja saavutettavuuden. Tyylittele sitten Tailwindilla:

<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:n CSS-first-määrityksessä lataa preset @config-direktiivillä tai tuo @zephora/tokens/css ja viittaa raakoihin --z-* muuttujiin suoraan @theme-lohkossa.