Ενσωμάτωση Tailwind

Δύο κομμάτια: ένα preset παραγόμενο από tokens (zephoraPreset) και μια headless λειτουργία (unstyled) σε κάθε component.

Preset

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

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

Το preset αντιστοιχίζει τα tokens της Zephora στο Tailwind: κλίμακες χρωμάτων (primary-500…), αποστάσεις, radius, μεγέθη γραμματοσειράς με ύψη γραμμής, σκιές elevation, διάρκειες/easings κίνησης και z-index. Επίσης εκθέτει σημασιολογικά χρώματα που αντιδρούν στο θέμα, βασισμένα στις ίδιες CSS μεταβλητές που χρησιμοποιούν τα styled components — bg-background, text-foreground, bg-accent, border-border, ring-ring — ώστε οι utilities του Tailwind να ακολουθούν αυτόματα το ενεργό θέμα.

Headless λειτουργία

Πέρασε unstyled για να αφαιρέσεις το styling της 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

Με τη CSS-first διαμόρφωση του Tailwind v4, φόρτωσε το preset μέσω @config ή εισήγαγε το @zephora/tokens/css και αναφέρσου στις ακατέργαστες μεταβλητές --z-* απευθείας μέσα στο @theme.