CSS を Tailwind に変換
HTML と CSS を貼り付けるだけ。インラインスタイルでも、スタイルシートでも、ページ全体でも構いません。CopyWeb がすべてのルールを Tailwind ユーティリティクラスに書き換えます。余白・色・タイポグラフィ・レスポンシブのブレークポイントはもちろん、hover やダークモードの variant まで対応。プロパティを 1 つずつ手で引いて積み上げるのではなく、そのまま出荷できる正確で慣用的な Tailwind が手に入ります。
プロパティだけでなく、スタイルそのものを読み取る CSS→Tailwind コンバーター
無料の変換ツールはプロパティを 1 対 1 で置き換えるだけ。margin: 8px は m-2 になりますが、メディアクエリ、擬似クラス、ショートハンド、カスケード、デフォルトスケールに乗らない値といった実務の難所で軒並み詰まります。CopyWeb は違います。レンダリングされたページの算出済みスタイルをブラウザと同じ目線で読み取り、それを慣用的な Tailwind として表現し直します。レスポンシブの prefix、状態 variant、任意の値まで含めて、重複を除いたきれいなユーティリティ文字列にまとめます。だからここで CSS を Tailwind に変換すると、手作業で仕上げる必要のある中途半端な訳ではなく、あなたのスタイルシートが実際にレンダリングしていたとおりに描画されるクラスが手に入ります。
すべてのプロパティを正しくマッピング
余白・パディング・flexbox・グリッド・タイポグラフィ・色・ボーダー・シャドウは、適切な Tailwind トークン（m-2、gap-4、text-lg、font-semibold、rounded-xl）に対応づけられます。スケールに一致する値がなければルールを捨てずに任意の値へフォールバックするので、Tailwind への変換であなたの CSS から失われるものはありません。
レスポンシブ・hover・ダークモード
メディアクエリは md:、lg:、xl: の prefix に、:hover・:focus・:active は hover:・focus:・active: の variant に、prefers-color-scheme は dark: ユーティリティになります。CSS のブレークポイントとインタラクティブな状態は、デスクトップ 1 枚のレイアウトに潰されることなく、Tailwind への変換を生き延びます。
必要なときは任意の値で
Tailwind は標準ですべてのピクセルを表現できるわけではないので、CopyWeb はスケールに乗らないケースで JIT の任意値構文（mt-[13px]、w-[42ch]、bg-[#1f2a44]、grid-cols-[1fr_280px]）を使います。一点ものの寸法やブランドカラーは、最も近いトークンに丸めて元のデザインからずれていくのではなく、そのまま正確に変換されます。
重複を除いた読みやすいクラス文字列
要素をまたいで繰り返される宣言は、一貫した順序のユーティリティ群にまとめられるので、ランダムに積み上がったクラスの山ではなく、整理された className 文字列が手に入ります。Tailwind は自分で手書きしたときと同じ読み口で、ざっと見渡せて、手直ししやすく、そのまま自分のコンポーネントへ持ち込めます。
CSS を手作業で Tailwind に変換するのがこれほど退屈な理由
スタイルシートをプロパティ 1 つずつ Tailwind に翻訳していくのは、まさに午後をまるごと飲み込み、静かにミスを誘う種類の機械作業です。手作業がどこで足を引っ張るのか、そしてなぜ専用の CSS→Tailwind コンバーターが存在するのかを、ここで見ていきます。
スケール全体を暗記する
0.5rem は p-2、1.25rem は text-xl、#6366f1 は indigo-500 ——そう分かるには、Tailwind のスケール全体を暗記するか、もう 1 つのタブにドキュメントを開きっぱなしにするしかありません。スタイルシート 1 枚分その照合をやれば、何百もの小さな判断が積み上がり、そのどれもが誤ったトークンをつかむチャンスになります。
メディアクエリと状態をほどく
すべての @media ブロックは、影響を受けるユーティリティごとに md:・lg: の prefix へほどく必要があり、すべての :hover や :focus は variant に書き換えなければなりません。1 つでも見落とせば、レスポンシブのレイアウトかインタラクティブな状態が静かに壊れます。しかも、どのルールを落としたのか教えてくれるエラーは出ません。
スケール外の値をどう扱うか決める
実際のデザインは Tailwind にトークンのない値だらけです。13px の間隔、42% の幅、一点もののブランドカラー。その一つひとつについて、config を拡張するか任意の値で済ませるかを決めなければなりません。その判断を宣言ごとに何度も繰り返すことこそ、手早いはずの作業を長丁場に変える正体です。
正規表現コンバーターはカスケードを無視する
検索と置換のツールは宣言を 1 つずつ翻訳するだけで、詳細度・継承・ショートハンドの展開を無視します。吐き出された Tailwind はあなたの CSS と同じようには描画されないので、結局 DevTools を開いて差分を手作業で突き合わせる羽目になります——そして、それが作業の大半なのです。
CopyWeb が CSS を正しく Tailwind に変換する仕組み
CopyWeb は生のスタイルシートではなく、レンダリングされた結果から変換します。そのひとつの判断こそ、返ってくる Tailwind がカスケードもショートハンドも含めてあなたのページの見た目どおりに一致する理由です。ルールを 1 つずつそのまま訳しただけの、見た目が合わない変換とは違います。
レンダリングしてから算出済みスタイルを読む
CopyWeb はあなたの HTML をレンダリングし、カスケード・継承・ショートハンドがすべて解決した後の、各要素の最終的な算出済みスタイルを読み取ります。Tailwind は画面に実際に効いている内容から生成されるので、ソースのルールをほどいて何が勝つか推測するのではなく、CSS の本当の結果を捉えます。
まずトークン、次に任意の値
算出済みの各値は最も近い Tailwind スケールのトークンに対応づけられ、きれいに一致するものがないときだけ任意値構文へフォールバックします。スケールが合うところでは慣用的なユーティリティを、合わないところでは正確な値を得られます——丁寧な開発者が下すのと同じ判断を、ページ全体に自動で適用します。
variant とブレークポイントを保持
レスポンシブ挙動、hover・focus・active の状態、ダークモードは Tailwind の prefix システムで表現し直されるので、CSS のあらゆる条件付きスタイルが正しい variant として落とし込まれます。変換後の Tailwind は、元のスタイルシートが意図したとおりに、画面サイズやインタラクションをまたいで振る舞います。
Tailwind でスタイリング済み、すぐ使える出力
成果物は、Tailwind クラスだけで完全にスタイリングされたきれいなコンポーネントとして組み直されたマークアップです。さっとリファクタしたいなら className 文字列をそのままコピーし、コンポーネントごとプロジェクトに取り込んでも構いません。どちらにせよ、まだ変換が必要な CSS ではなく、最初の 1 行からユーティリティファーストの Tailwind です。
CSS→Tailwind コンバーターに期待するすべて
CopyWeb は、実際のプロジェクトが求める精度とカバレッジで CSS を Tailwind に変換するために作られています。スタイルの付いた単一要素から、完全なスタイルシートを持つページ全体まで。
インラインスタイル・スタイルシート・SCSS
インラインの style 属性も、リンクされたスタイルシートも、SCSS や LESS のコンパイル出力も変換できます。CopyWeb はスタイルがどんな形でページに届いても読み取るので、元のフォーマットが Tailwind への変換を妨げることはありません。
Tailwind スケールを完全カバー
余白・サイズ・色・タイポグラフィ・ボーダー・シャドウ・flexbox・グリッドまで、コアスケール全体を正確に対応づけるので、スタイルの大半がきれいで慣用的なユーティリティクラスとして落とし込まれます。
レスポンシブと状態 variant
md:・lg:・xl: のブレークポイント、hover・focus・active・disabled の状態、dark: モードがすべて欠けずに通るので、変換後の Tailwind は CSS が定義したすべての条件付きルールを保ちます。
スケール外には任意の値
スケールに乗らないピクセル・パーセント・独自ブランドカラーは Tailwind の任意値構文で変換されるので、トークンのない値も、デザインから丸めてずらすのではなく正確に落とし込まれます。
きれいで順序の整ったクラス名
ユーティリティは一貫してグループ化・順序づけされ、要素をまたいで重複が除かれるので、どの className も手書きの Tailwind のように読めます。作業に取りかかる前に並べ替えが必要な、ごちゃ混ぜのリストにはなりません。
ライブプレビューとエクスポート
Tailwind でスタイリングされた結果を本物のサンドボックスでレンダリング表示し、デザインと一致するか確認してから、クラス文字列をコピーするかコンポーネントをエクスポートできます。プレビューで見たものがそのまま持ち帰れるので、エクスポート後に驚かされることはありません。
プランと料金
AIでデザインをコードに変換。ニーズに合ったプランをお選びください。
Small
含まれる内容
- 100クレジット（1年間有効）
- URL → HTML — 公開中のURLを貼るだけで、数秒でクリーンな編集可能コードに
- Figma → HTML — どんなFigmaファイルからもセマンティックでレスポンシブなHTML & CSSを生成
- Figma → Tailwind — Figmaのフレームを自然なTailwindコンポーネントに変換
- CSS → Tailwind — スタイルシートをクリーンなTailwindユーティリティクラスに書き換え
- HTML → React — 素のマークアップを再利用可能なReactコンポーネントに変換
- Image → Code — スクリーンショットやモックアップをレスポンシブなフロントエンドコードに
- Website Cloner — 公開中のどんなページも編集可能なコードに再構築
- 1:1のピクセルパーフェクト、本番投入できるコード
- オンラインプレビュー & 書き出し
Medium
含まれる内容
- 400クレジット（1年間有効）
- URL → HTML — 公開中のURLを貼るだけで、数秒でクリーンな編集可能コードに
- Figma → HTML — どんなFigmaファイルからもセマンティックでレスポンシブなHTML & CSSを生成
- Figma → Tailwind — Figmaのフレームを自然なTailwindコンポーネントに変換
- CSS → Tailwind — スタイルシートをクリーンなTailwindユーティリティクラスに書き換え
- HTML → React — 素のマークアップを再利用可能なReactコンポーネントに変換
- Image → Code — スクリーンショットやモックアップをレスポンシブなフロントエンドコードに
- Website Cloner — 公開中のどんなページも編集可能なコードに再構築
- 1:1のピクセルパーフェクト、本番投入できるコード
- オンラインプレビュー & 書き出し
Large
含まれる内容
- 1,000クレジット（1年間有効）— 1クレジットあたり約4¢、Mediumパックのクレジット単価の半額です。
- URL → HTML — 公開中のURLを貼るだけで、数秒でクリーンな編集可能コードに
- Figma → HTML — どんなFigmaファイルからもセマンティックでレスポンシブなHTML & CSSを生成
- Figma → Tailwind — Figmaのフレームを自然なTailwindコンポーネントに変換
- CSS → Tailwind — スタイルシートをクリーンなTailwindユーティリティクラスに書き換え
- HTML → React — 素のマークアップを再利用可能なReactコンポーネントに変換
- Image → Code — スクリーンショットやモックアップをレスポンシブなフロントエンドコードに
- Website Cloner — 公開中のどんなページも編集可能なコードに再構築
- 1:1のピクセルパーフェクト、本番投入できる React, Vue & HTML
- 優先サポート & プライベートモード
- Stripeによる安全な決済
CSS to Tailwind — よくある質問
CSS を Tailwind に変換することについて、コンバーターが何を出力するのか、プロパティ照合では扱えない部分をどう処理するのかに関するよくある質問。
数秒で CSS を Tailwind に変換
HTML と CSS を貼り付ければ、CopyWeb がすべてのルールをきれいな Tailwind ユーティリティクラスに書き換えます。レスポンシブ・hover・ダークモードの variant も対応。無料で始められます。