Tailwind ինտեգրում

Երկու մաս․ token-ներից գեներացված preset (zephoraPreset) և headless ռեժիմ (unstyled) ամեն բաղադրիչում։

Preset

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

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

Preset-ը Zephora token-ները քարտեզագրում է Tailwind-ի մեջ․ գունային սանդղակներ (primary-500…), տարածություն, radius, տողի բարձրությամբ տառաչափեր, բարձրության ստվերներ, շարժման տևողություններ/easing-ներ և z-index։ Այն նաև ներկայացնում է թեմային արձագանքող սեմանտիկ գույներ, որոնք հենվում են ոճավորված բաղադրիչների օգտագործած նույն CSS փոփոխականների վրա — bg-background, text-foreground, bg-accent, border-border, ring-ring — այնպես որ Tailwind-ի utility-ները ավտոմատ հետևում են ակտիվ թեմային։

Headless ռեժիմ

Փոխանցեք unstyled՝ Zephora ոճավորումը հեռացնելու համար՝ պահպանելով վարքն ու հասանելիությունը։ Ապա ոճավորեք 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

Tailwind v4-ի CSS-first կոնֆիգուրացիայի դեպքում բեռնեք preset-ը @config-ի միջոցով, կամ ներմուծեք @zephora/tokens/css-ը և ուղղակիորեն հղեք չմշակված --z-* փոփոխականները @theme-ում։