CSSからTailwindへの変換ガイド：ユーティリティクラスへの移行と実践的なマッピング

カスタムCSSからTailwind CSSへの移行は、現代のフロントエンド開発で最もよく行われるリファクタリング作業の一つです。レガシーのスタイルシートを変換する場合でも、FigmaのデザインをHTML化する場合でも、サードパーティコンポーネントを取り込む場合でも、CSSプロパティとTailwindユーティリティクラスの対応関係を知っておくと大幅な時間短縮になります。

CSSをTailwindに即座に変換 →

Tailwind CSSの仕組み

TailwindはUtility-FirstのCSSフレームワークです。.card や .hero-section のような意味のあるクラス名を書く代わりに、単一目的のユーティリティクラスをHTMLに直接組み合わせます：

<!-- 従来のCSSアプローチ -->
<div class="card">...</div>

<!-- Tailwindアプローチ -->
<div class="rounded-lg shadow-md p-6 bg-white border border-gray-200">...</div>

各ユーティリティクラスは1つ（または少数のグループ）のCSS宣言にマッピングされます。Tailwindのビルドプロセスはコードをスキャンして実際に使用されたCSSだけを生成します。

CSSとTailwindの主要マッピング

スペーシング（margin、padding）

Tailwindはデフォルトで 1 = 4px（0.25rem）の数値スケールを使用します：

CSS	Tailwind
`margin: 0`	`m-0`
`margin: 1rem`	`m-4`
`margin: 2rem`	`m-8`
`margin-top: 1.5rem`	`mt-6`
`margin-left: auto`	`ml-auto`
`padding: 0.5rem`	`p-2`
`padding: 1.25rem`	`p-5`
`padding-left: 2rem`	`pl-8`
`padding-top: 0; padding-bottom: 0`	`py-0`
`padding-left: 1rem; padding-right: 1rem`	`px-4`

省略パターン：m = margin、p = padding、t/r/b/l = 上/右/下/左、x = 水平、y = 垂直。

サイズ（width、height）

CSS	Tailwind
`width: 100%`	`w-full`
`width: 50%`	`w-1/2`
`width: 100vw`	`w-screen`
`width: auto`	`w-auto`
`width: 2rem`	`w-8`
`max-width: 64rem`	`max-w-4xl`
`height: 100%`	`h-full`
`height: 100vh`	`h-screen`
`min-height: 100vh`	`min-h-screen`

タイポグラフィ

CSS	Tailwind
`font-size: 0.875rem`	`text-sm`
`font-size: 1rem`	`text-base`
`font-size: 1.25rem`	`text-xl`
`font-size: 2.25rem`	`text-4xl`
`font-weight: 400`	`font-normal`
`font-weight: 600`	`font-semibold`
`font-weight: 700`	`font-bold`
`line-height: 1.5`	`leading-normal`
`text-align: center`	`text-center`
`text-transform: uppercase`	`uppercase`
`color: #6b7280`	`text-gray-500`

Flexbox

CSS	Tailwind
`flex-direction: row`	`flex-row`
`flex-direction: column`	`flex-col`
`justify-content: center`	`justify-center`
`justify-content: space-between`	`justify-between`
`align-items: center`	`items-center`
`flex-wrap: wrap`	`flex-wrap`
`gap: 1rem`	`gap-4`
`flex: 1`	`flex-1`

Grid

CSS	Tailwind
`grid-template-columns: repeat(3, 1fr)`	`grid-cols-3`
`grid-column: span 2`	`col-span-2`
`gap: 1.5rem`	`gap-6`

ボーダーとシャドウ

CSS	Tailwind
`border: 1px solid`	`border`
`border-radius: 0.25rem`	`rounded`
`border-radius: 0.5rem`	`rounded-lg`
`border-radius: 9999px`	`rounded-full`
`box-shadow: 0 4px 6px rgba(0,0,0,0.1)`	`shadow-md`

任意の値

デザインがTailwindのデフォルトスケールにない値を使う場合は、角括弧付きの任意値構文を使用します：

<!-- Tailwindの任意値 -->
<div class="w-[327px] pt-[22px] text-[#1a2b3c]">

任意値はあらゆるTailwindユーティリティで動作します：h-[calc(100vh-4rem)]、grid-cols-[1fr_2fr_1fr]。

レスポンシブデザイン

Tailwindはモバイルファーストのブレークポイントプレフィックスを使用します：

ブレークポイント	CSSの等価	プレフィックス
モバイル（デフォルト）	すべての幅	（なし）
SM	`@media (min-width: 640px)`	`sm:`
MD	`@media (min-width: 768px)`	`md:`
LG	`@media (min-width: 1024px)`	`lg:`

<!-- Tailwindのレスポンシブクラス -->
<h1 class="text-2xl md:text-4xl lg:text-5xl">ヒーロー</h1>

実際の変換例

典型的なカードコンポーネント：

/* 変換前：カスタムCSS */
.card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  border: 1px solid #f3f4f6;
}

.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}

<!-- 変換後：Tailwind -->
<div class="bg-white rounded-xl p-6 shadow-md border border-gray-100">
  <h3 class="text-lg font-semibold text-gray-900 mb-2">タイトル</h3>
  <p class="text-sm text-gray-500 leading-relaxed">本文テキスト。</p>
</div>

Tailwind v4の変更点

Tailwind v4は2025年初頭にリリースされ、設定方法が変わりました。

`tailwind.config.js` が不要に

v4ではJavaScriptファイルからCSSへ設定が移動しました：

/* v4: メインCSSファイル */
@import "tailwindcss";

@theme {
  --color-brand: #1a73e8;
  --spacing-18: 4.5rem;
}

3つの @tailwind ディレクティブ（base・components・utilities）は単一の @import "tailwindcss" に置き換えられました。

v4でのクラス名変更

v3クラス	v4相当	変更内容
`shadow`	`shadow-sm`	デフォルトシャドウがより微妙に
`ring`	`ring-3`	デフォルトリング幅が1pxに減少

公式アップグレードツール

npx @tailwindcss/upgrade

これで tailwind.config.js の @theme ブロックへの変換、非推奨クラスの名前変更が処理されます。その後、残りのカスタムCSSにはCSS to Tailwindコンバーターを使用してください。

オンラインCSS to Tailwindコンバーター

1回限りの変換には、ZeroToolのCSS to TailwindコンバーターがCSSプロパティブロックをリアルタイムでTailwindに変換します。左にCSSを貼り付けると、右にTailwindクラスが出力されます——ビルドステップもインストールも不要。

CSS to Tailwindコンバーターを試す →