ガイド

• CSS と Tailwind の比較 — クラシック CSS は複雑なセレクタやアニメーションに強い。Tailwind は見た目の判断をマークアップと同居させる。多くのチームは併用します。
• CSS の余白から Tailwind へ — padding: 1.5rem は p-6。ショートハンドは方向ユーティリティへ。スケール外は p-[13px]。
• CSS のタイポグラフィから Tailwind へ — font-size: 1.5rem → text-2xl。font-weight: 700 → font-bold。色は text-*。
• CSS Flexbox から Tailwind へ — display:flex → flex。flex-direction:column → flex-col。justify-content:space-between → justify-between。gap:1rem → gap-4。
• CSS Grid から Tailwind へ — grid-template-columns: repeat(3, 1fr) → grid-cols-3。カスタムトラックは任意値。
• CSS の色指定から Tailwind へ — 既知の hex は text-gray-900 などへ。未知は bg-[#1a2b3c]。
• CSS のボーダーから Tailwind へ — border: 1px solid → border + border-color。border-radius: 0.5rem → rounded-lg。
• レスポンシブ CSS から Tailwind へ — @media (min-width: 768px) → md:。1024px → lg:。複雑なクエリは要確認。
• CSS のシャドウから Tailwind へ — 一般的な影 → shadow / shadow-lg。独自の影 → 任意値。
• CSS のポジショニングから Tailwind へ — position:absolute → absolute。inset は top/right/bottom/left。独自 z-index は任意値。
• CSS 移行の進め方 — 段階移行を推奨。新規は Tailwind、次にホットパス、レガシー CSS は置換まで残す。

コンバーターを開く Chrome 拡張機能