De CSS Flexbox a Tailwind
display:flex → flex. flex-direction:column → flex-col. justify-content:space-between → justify-between. gap:1rem → gap-4.
Los contenedores flexibles se traducen casi uno a uno: display:flex da flex, flex-direction:column da flex-col y justify-content:space-between da justify-between. El detalle importante está en la separación, porque gap:1rem se convierte en gap-4 y suele funcionar mejor que repartir márgenes en cada hijo. Los alineamientos raros piden una mirada aparte.
Display y dirección
display:flex → flex; flex-direction:column → flex-col. Empieza por el contenedor, luego hijos.
Alineación
justify-content:center → justify-center; align-items:center → items-center. Nombres cortos, misma idea.
Gap frente a márgenes
Prefiere gap-4 en el contenedor a margin en cada hijo cuando el espaciado es uniforme.
Probar
.example { display: flex; gap: 1rem; padding: 1rem; }Nota de confianza: verifica el resultado visualmente. El conversor es un borrador para desarrolladores.