Tailwind-samþætting

Tveir hlutar: forstilling búin til úr token-um (zephoraPreset) og headless-hamur (unstyled) á hverri einingu.

Forstilling

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

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

Forstillingin varpar Zephora-token-um yfir í Tailwind: litaskalar (primary-500…), bil, radíus, leturstærðir með línuhæðum, hæðarskuggar, hreyfitímar/easing og z-index. Hún birtir einnig þemunæma merkingarliti sem byggja á sömu CSS-breytum og styled-einingarnar nota — bg-background, text-foreground, bg-accent, border-border, ring-ring — svo Tailwind-utility-klasar fylgja virka þemanu sjálfkrafa.

Headless-hamur

Sendu unstyled til að fjarlægja Zephora-stíla en halda hegðun og aðgengi. Stílaðu svo með 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

Með CSS-first-stillingum Tailwind v4 skaltu hlaða forstillinguna með @config, eða flytja inn @zephora/tokens/css og vísa beint í hráar --z-* breytur í @theme.