CSS 移行の進め方

段階移行を推奨。新規は Tailwind、次にホットパス、レガシー CSS は置換まで残す。

全体を一度に書き換える移行は、多くの現場で失敗します。新規は Tailwind で書き、利用頻度の高い画面を次に移し、既存の CSS は置き換わるまで残すのが現実的です。段階的な手順と確認リストを示します。

コンポーネント単位の strangler

旧 CSS が生きている間に新 UI をユーティリティ化。そのコンポーネントの視覚 QA 後にだけ CSS を消す。

プリミティブ優先

ページレイアウトよりボタン・input・card を先に。design system の二度手間を減らす。

完了の定義

2 幅、インタラクション状態、孤児 CSS 削除、任意値はチケットで根拠付け。

試す

コンバーターを開く

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

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