CSS to Tailwind CSS — 変換の仕組みとTailwind CSS移行のベストプラクティス
CSSからTailwind CSSへの移行は、既存のスタイルシートを読み解きながら対応するユーティリティクラスを特定する作業です。CSS to Tailwindツールはこのプロセスを自動化し、margin・padding・font・color・flex・gridなどの主要プロパティを瞬時に変換します。
Tailwind CSSのスペーシングシステム
Tailwindのスペーシングは4px=1単位のスケールを使います。m-4がmargin: 16px、p-2がpadding: 8pxに対応します。このスケールはデザインの一貫性を保ちやすく、チームでの開発で「なぜこのサイズ？」という迷いを減らします。CSS to Tailwindツールでは最も近いTailwindスケールに自動的に変換します。
フレックスボックスとグリッドのTailwind変換
display: flexはflex、justify-content: space-betweenはjustify-between、align-items: centerはitems-centerに変換されます。Tailwindではflexとgridのユーティリティが充実しており、複雑なレイアウトもクラスの組み合わせで実現できます。gap-4でgap: 16pxを表現するなど直感的に記述できます。
カラーシステムの変換方法
TailwindはHSLベースのカラーパレット（gray-100〜gray-900、blue-500など）を提供します。#3b82f6はblue-500、#ef4444はred-500に対応します。ただしカスタムカラーはTailwindの標準パレットにない場合が多く、そのような場合はtailwind.config.jsでカスタムカラーを定義するか、bg-[#カラーコード]の任意値構文を使います。
CSSからTailwindへ移行するときの注意点
CSSからTailwindへの移行では、すべてのプロパティに対応するクラスがあるわけではありません。複雑なアニメーション・カスタムフォント・複雑なclip-pathなどは対応外になります。CSS to Tailwindツールでは変換できないプロパティを「対応なし」として別表示するので、それらは任意値構文（例: top-[42px]）やCSSモジュールを併用して対応します。