CSS Flexbox to Tailwind
display:flex → flex. flex-direction:column → flex-col. justify-content:space-between → justify-between. gap:1rem → gap-4.
Gap vs margins
Prefer gap-* on the flex container when you are converting modern layouts. Migrating
old margin-based gutters one child at a time is how spacing debt returns.
Alignment defaults
Browser flex defaults and Tailwind resets can disagree with legacy CSS that relied on implicit stretch. After conversion, verify stretched children still fill the cross axis.
Wrapping
flex-wrap is easy to forget when a toolbar looked fine on a wide monitor. Resize before
you merge.
Try it
.example { display: flex; gap: 1rem; padding: 1rem; }Trust note: verify output visually. The converter is a draft helper for developers.