Fondations

Spacing

Échelle Tailwind par multiples de 4px. md (16px / p-4) est l’unité de base des paddings de composants.

Échelle (multiples de 4px)

Chaque pas est un multiple de l’unité de base 4px. On ne crée jamais de valeur hors échelle (pas de 13px, 7px…).

p-1

4pxMicro-espacement : icône ↔ texte, gap d’un badge

p-2

8pxGap d’un groupe de boutons, padding d’une puce

p-3

12pxPadding d’un input, d’un petit bouton

p-4

16pxUnité de base : padding standard d’une card, d’un bouton

p-6

24pxPadding confortable d’une card, gap entre champs de formulaire

p-8

32pxEspacement entre blocs d’une section

p-12

48pxMarge verticale entre sections d’une page

p-16

64pxRespiration large : hero, séparation de grandes zones

md (16px / p-4) = unité de base des paddings de composants.
Conserver les multiples de 4px — jamais de valeur arbitraire (15px, 1.3rem…).
Préférer gap pour les layouts flex/grid, space-y-* pour les listes.

À faire

À éviter