Fondations
Espacement
Base : 4px
Tailwind utilise une base de 4px (1 unité = 4px). Respecter cette grille à tous les niveaux — ne jamais utiliser de valeurs arbitraires.
p-1
4px
Gap entre icône et texte dans un badge
p-2
8px
Padding interne des badges, padding vertical des inputs sm
p-3
12px
Padding des boutons sm, cellules de tableau compactes
p-4
16px
Padding des boutons md, padding des cards petites
p-5
20px
Padding sidebar nav items, entrées de formulaire
p-6
24px
Padding card-header/body/footer, sections de page
p-8
32px
Demo blocks, sections principales, hero padding
p-10
40px
Main content padding horizontal (px-10)
p-12
48px
Section verticals dans les minisites
p-16
64px
Hero sections, grandes séparations visuelles
p-24
96px
Hero padding vertical maximal
Gaps et espacements récurrents
Entre boutons dans un groupe
gap-2 (8px)
Entre label et input
mb-1 (4px)
Entre champs de formulaire
space-y-5 (20px)
Entre sections d'une même page
mb-12 (48px)
Padding horizontal page (main)
px-10 (40px)
Entre items de sidebar nav
mb-0.5 (2px)
Entre groupes de sidebar nav
mb-5 (20px)
Padding horizontal card
px-6 (24px)
Padding vertical card header/body
py-4 (16px)
Cellule de tableau
px-4 py-3 (16px / 12px)
Contenu max-width
max-w-4xl (896px)
Border radius
rounded-sm
2px
rounded
4px
rounded-md
6px
rounded-lg
8px
rounded-xl
12px
rounded-full
∞