De CSS Flexbox para Tailwind

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

Os contentores flexíveis passam quase diretamente: display:flex dá flex, flex-direction:column dá flex-col e justify-content:space-between dá justify-between. A diferença prática está nos espaçamentos, onde gap:1rem se resume a gap-4 em vez de margens espalhadas pelos filhos. Alinhamentos menos comuns continuam a pedir leitura atenta.

Display e direção

display:flex → flex; flex-direction:column → flex-col. Comece pelo contentor, depois filhos.

Alinhamento

justify-content:center → justify-center; align-items:center → items-center. Nomes curtos, mesma ideia.

Gap vs margens

Prefira gap-4 no contentor a margin em cada filho quando o espaçamento for uniforme.

Experimentar

Abrir conversor

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

Nota de confiança: verifique o resultado visualmente. O conversor é um rascunho para developers.