De l’espacement CSS à Tailwind

padding: 1.5rem devient p-6. Les raccourcis s'étendent en utilitaires de côté. Hors échelle : p-[13px].

L’espacement est souvent la première chose que l’on traduit dans une migration. Cette page montre le passage de padding: 1.5rem à p-6, l’éclatement des raccourcis en utilitaires par côté, et le sort des longueurs qui ne tombent pas sur l’échelle. Ces dernières donnent des valeurs arbitraires du type p-[13px], à relire attentivement.

Échelle vs rem libres

1.5rem est souvent p-6. 13px hors échelle demande p-[13px] ou un redesign vers un token. N’arrondissez pas à l’aveugle.

Shorthand qui s’ouvre

margin: 1rem 2rem peut devenir my-4 mx-8. Vérifiez chaque côté avant la PR.

Espacement de layout

gap-* en flex/grid évite les marges orphelines entre enfants.

Essayer

Ouvrir le convertisseur

.example { display: flex; gap: 1rem; padding: 1rem; }

Note de confiance : vérifiez le rendu. Le convertisseur est une aide de brouillon.