Thème

La propriété theme définit votre système de design avec 7 catégories de jetons optionnelles. Tous les jetons génèrent des propriétés CSS personnalisées et des classes utilitaires Tailwind CSS.

colors

Jetons de couleur nommés sous forme de paires clé-valeur. Chacun devient une variable CSS (--color-{name}) et une classe Tailwind (bg-{name}, text-{name}).

fonts

Configuration typographique pour les polices de titre, corps et monospace. Supporte family, fallback, weights, size, line height et URL Google Fonts.

spacing

Jetons d’espacement nommés sous forme de chaînes de classes Tailwind. Définissez largeurs de conteneur, padding de section, gaps et espacement des composants.

shadows

Jetons d’ombre nommés sous forme de valeurs CSS box-shadow. Chacun devient un utilitaire shadow-{name}.

animations

Animations @keyframes personnalisées avec indicateur d’activation, durée, fonction de temporisation, nombre d’itérations et définitions de keyframes.

breakpoints

Points de rupture responsifs personnalisés en pixels. Chacun devient une media query min-width pour les utilitaires responsifs.

borderRadius

Jetons de rayon de bordure nommés sous forme de valeurs CSS. Chacun devient une classe utilitaire rounded-{name}.

theme: colors: primary: "#3b82f6" secondary: "#8b5cf6" background: "#0a0e1a" text: "#e8ecf4" fonts: heading: family: Inter weights: [600, 700] lineHeight: "1.2" body: family: Inter size: "16px" spacing: container: "max-w-7xl mx-auto px-4" section: "py-16 sm:py-20" shadows: card: "0 4px 6px rgba(0, 0, 0, 0.1)"