Uunganishaji wa Tailwind

Vipande viwili: preset iliyozalishwa kutoka token (zephoraPreset) na hali ya headless (unstyled) kwenye kila kijenzi.

Preset

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

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

Preset huweka token za Zephora ndani ya Tailwind: skeli za rangi (primary-500…), nafasi, radius, ukubwa wa fonti wenye urefu wa mistari, vivuli vya mwinuko, muda/easing za mwendo na z-index. Pia hufichua rangi za kisemantiki zinazoitikia mandhari zinazotegemea vigezo vilevile vya CSS ambavyo vijenzi vilivyopakwa mitindo hutumia — bg-background, text-foreground, bg-accent, border-border, ring-ring — hivyo huduma za Tailwind hufuata mandhari amilifu kiotomatiki.

Hali ya headless

Pitisha unstyled ili kuondoa mitindo ya Zephora huku ukihifadhi tabia na ufikivu. Kisha paka mitindo kwa 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

Kwa usanidi wa CSS-kwanza wa Tailwind v4, pakia preset kupitia @config, au ingiza @zephora/tokens/css na urejelee vigezo ghafi vya --z-* moja kwa moja ndani ya @theme.