Espacement

Echelle d'espacement basee sur les valeurs standard de Tailwind CSS. Utilisee pour les marges, paddings, gaps et dimensions.

Convention

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.

Echelle d'espacement

Barres proportionnelles representant chaque valeur de l'echelle Tailwind.

0.5

0.125rem (2px)

0.25rem (4px)

1.5

0.375rem (6px)

0.5rem (8px)

2.5

0.625rem (10px)

0.75rem (12px)

3.5

0.875rem (14px)

1rem (16px)

1.25rem (20px)

1.5rem (24px)

1.75rem (28px)

2rem (32px)

2.25rem (36px)

2.5rem (40px)

2.75rem (44px)

3rem (48px)

3.5rem (56px)

4rem (64px)

5rem (80px)

6rem (96px)

Border radius

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

Espacements courants

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)