Echelle d'espacement basee sur les valeurs standard de Tailwind CSS. Utilisee pour les marges, paddings, gaps et dimensions.
L'unite de base est 0.25rem (4px). Chaque pas multiplie cette base. Par exemple, p-4 = 1rem = 16px. Les paddings minimaux des cartes sont p-6 (24px) selon le design system.
Barres proportionnelles representant chaque valeur de l'echelle Tailwind.
L'echelle des rayons de bordure est basee sur --radius: 1rem comme valeur de reference.
rounded-sm
calc(1rem - 4px)
Badges, chips
rounded-md
calc(1rem - 2px)
Inputs, boutons petits
rounded-lg
1rem
Cartes, conteneurs (base)
rounded-xl
calc(1rem + 4px)
Modales, popovers
rounded-2xl
calc(1rem + 8px)
Hero sections, grandes cartes
Valeurs recommandees selon le contexte.
| Contexte | Classe | Valeur |
|---|---|---|
| Padding carte | p-6 | 1.5rem (24px) |
| Gap grille | gap-4 | 1rem (16px) |
| Espacement sections | space-y-10 | 2.5rem (40px) |
| Padding bouton | px-4 py-2 | 16px / 8px |
| Padding input | px-3 py-2 | 12px / 8px |
| Conteneur principal | max-w-6xl mx-auto | 72rem (1152px) |