Tailwind integratsioon

Kaks osa: token'itest genereeritud preset (zephoraPreset) ja headless režiim (unstyled) igal komponendil.

Preset

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

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

Preset kaardistab Zephora token'id Tailwind'i: värviskaalad (primary-500…), vahed, raadius, reakõrgustega fondisuurused, kõrgusvarjud, liikumiskestused/easing'ud ja z-index. Samuti pakub see teemale reageerivaid semantilisi värve, mida toetavad samad CSS muutujad, mida stiliseeritud komponendid kasutavad — bg-background, text-foreground, bg-accent, border-border, ring-ring — nii et Tailwind'i utiliidid järgivad automaatselt aktiivset teemat.

Headless režiim

Anna unstyled, et eemaldada Zephora stiilid, säilitades käitumise ja ligipääsetavuse. Seejärel stiliseeri Tailwind'iga:

<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-põhises konfiguratsioonis lae preset @config kaudu või impordi @zephora/tokens/css ja viita otse toorele --z-* muutujatele @theme sees.