CSS の余白から Tailwind へ
padding: 1.5rem は p-6。ショートハンドは方向ユーティリティへ。スケール外は p-[13px]。
余白は移行の第一歩に向いています。padding: 1.5rem は p-6 になり、ショートハンドは辺ごとのユーティリティへ分解されます。スケール外の長さは p-[13px] のような任意値になるので、目視で確認してください。
スケール対ばらつき rem
1.5rem は多くの場合 p-6。スケール外の 13px は p-[13px] かトークンへの再設計。盲目的な丸めはしない。
展開される shorthand
margin: 1rem 2rem は my-4 mx-8 になりうる。PR 前に各辺を確認。
レイアウトの余白
flex/grid の gap-* で子間の孤児マージンを避ける。
試す
.example { display: flex; gap: 1rem; padding: 1rem; }信頼メモ: 出力は視覚確認を。コンバーターは下書き用ヘルパーです。