converting-css-to-tailwind

CSS を Tailwind に変換する

プレーンな CSS ファイルを、マークアップに直接適用する Tailwind ユーティリティクラスに移行します。

ワークフロー

1. CSS ファイルを読み込み、すべてのルールを一覧にします
2. 各セレクターを参照している対応するマークアップ（HTML、JSX、TSX、Vue、Svelte）を見つけます
3. 以下の対応表を使って各ルールを変換します
4. すべてのプロパティがユーティリティで表現できたら、CSS ルールを削除します
5. 空になったら、CSS ファイル（またはインポート）を削除します
6. ページが同じ見た目になっていることを確認します。視覚的なリグレッションがないか確認してください

変換リファレンス

レイアウトとボックスモデル

CSS	Tailwind
display: flex	flex
display: grid	grid
display: none	hidden
position: relative	relative
position: absolute	absolute
justify-content: center	justify-center
align-items: center	items-center
gap: 16px	gap-4
width: 100%	w-full
max-width: 768px	max-w-3xl
margin: 0 auto	mx-auto
padding: 16px	p-4
overflow: hidden	overflow-hidden

タイポグラフィ

CSS	Tailwind
font-size: 14px	text-sm
font-weight: 700	font-bold
line-height: 1.5	leading-normal
text-align: center	text-center
text-transform: uppercase	uppercase
color: #333	text-[#333] またはテーマカラー
letter-spacing: 0.05em	tracking-wide

背景とボーダー

CSS	Tailwind
background-color: #f5f5f5	bg-[#f5f5f5] または bg-neutral-100
border: 1px solid #e5e7eb	border border-gray-200
border-radius: 8px	rounded-lg
box-shadow: 0 1px 3px ...	shadow-sm

レスポンシブ — メディアクエリ

@media (min-width: 768px) { .card { flex-direction: row; } }

→ <div class="flex-col md:flex-row">

ブレークポイントの対応：sm:（640）、md:（768）、lg:（1024）、xl:（1280）、2xl:（1536）

疑似クラスと状態

.btn:hover { background-color: #1d4ed8; }

→ <button class="hover:bg-blue-700">

プレフィックス：hover:、focus:、active:、disabled:、first:、last:、odd:、even:、group-hover:、peer-checked:

アニメーションとトランジション

transition: all 0.2s ease-in-out;

→ transition-all duration-200 ease-in-out

@keyframes spin { ... }
animation: spin 1s linear infinite;

→ animate-spin（組み込み）または tailwind.config で定義します

カスタムプロパティ／任意の値

直接対応するユーティリティがない場合は、任意の値を使います：

• w-[calc(100%-2rem)]
• grid-cols-[200px_1fr_1fr]
• text-[clamp(1rem,2vw,1.5rem)]

残りの CSS の扱い

ユーティリティだけでは表現できないものもあります：

• 複雑なセレクター（.parent > .child + .sibling）— マークアップを再構成するか、最後の手段として @apply を使います
• @font-face — グローバル CSS ファイルまたは globals.css に残します
• 複雑な @keyframes — tailwind.config.ts の theme.extend.keyframes で定義します
• CSS 変数 — tailwind.config.ts の Tailwind テーマ値に移行します

ルール

• テーマがある場合は、任意の 16 進数値よりもセマンティックな Tailwind クラス（bg-primary）を優先します
• 移行対象の CSS と同じものを再現するために @apply を使わないでください。それでは移行の目的が失われます
• 関連するユーティリティを論理的にグループ化します：レイアウト → 間隔 → タイポグラフィ → 色 → 効果
• コンポーネントにユーティリティが 10 個以上ある場合は、CSS クラスではなく再利用可能なコンポーネントへの切り出しを検討してください