CSS Flexbox から Tailwind へ

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

Flex コンテナはほぼ一対一で移せます。display:flex は flex、justify-content:space-between は justify-between になります。間隔は子要素の margin より container の gap-4 が安定します。

display と方向

display:flex → flex；flex-direction:column → flex-col。先にコンテナ、次に子。

整列

justify-content:center → justify-center；align-items:center → items-center。短い名前、同じ発想。

gap 対 margin

均一な余白なら各子の margin よりコンテナの gap-4。

試す

コンバーターを開く

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

信頼メモ: 出力は視覚確認を。コンバーターは下書き用ヘルパーです。