CSS のボーダーから Tailwind へ
border: 1px solid → border + border-color。border-radius: 0.5rem → rounded-lg。
Tailwind ではボーダーが二つに分かれ、border が太さ、別のユーティリティが色を担当します。角丸は border-radius: 0.5rem が rounded-lg です。フォーカス表示はリングに置き換わるので確認してください。
幅・スタイル・色
border: 1px solid #e5e7eb は多くの場合 border border-gray-200。不均一なら辺を分ける。
半径
0.5rem → rounded-lg。珍しいブランド半径は rounded-[…]。
フォーカス outline
変換後に focus-visible を確認。a11y 回帰の多くはフォーカス境界にある。
試す
.example { display: flex; gap: 1rem; padding: 1rem; }信頼メモ: 出力は視覚確認を。コンバーターは下書き用ヘルパーです。