De CSS Flexbox à Tailwind

display:flex → flex. flex-direction:column → flex-col. justify-content:space-between → justify-between. gap:1rem → gap-4.

Les conteneurs flex se transposent presque terme à terme : display:flex devient flex, flex-direction:column devient flex-col et justify-content:space-between devient justify-between. Le vrai gain porte sur les espacements, où gap:1rem se résume à gap-4 plutôt qu’à des marges dispersées sur chaque enfant. Les alignements exotiques demandent encore un coup d’œil.

Display et direction

display:flex → flex ; flex-direction:column → flex-col. Conteneur d’abord, puis enfants.

Alignement

justify-content:center → justify-center ; align-items:center → items-center. Noms courts, même idée.

Gap vs marges

Préférez gap-4 sur le conteneur à margin sur chaque enfant si l’espacement est uniforme.

Essayer

Ouvrir le convertisseur

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

Extension Chrome

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