CSS から Tailwind コンバーター
プレーンな CSS 宣言（display: flex、padding: 16px、color: #ffffff）を最も近い Tailwind CSS ユーティリティクラスに変換し、完全なトークンマッチがない場合は arbitrary-value 構文にフォールバックします。
入力
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-to-tailwind-converter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"cssInput": "display: flex;\npadding: 16px;\njustify-content: c…"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-to-tailwind-converter` tool (CSS to Tailwind Converter) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-to-tailwind-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS から Tailwind コンバーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
Tailwind CSS は、手書きのスタイルシートの代わりに、小さな再利用可能なユーティリティクラスからインターフェースを構築します。padding: 16px; の代わりに p-4、display: flex ルールの代わりに flex items-center justify-between を使用します。既存のスタイルシートを Tailwind に移行する場合、またはデザインツールからの CSS スニペットがあって Tailwind の同等物が必要な場合、各宣言を手入力して再度入力するのは退屈で、誤りやすいです。このツールは、プレーンな CSS 宣言をその最も近い Tailwind CSS ユーティリティクラスに自動的に変換します。
仕組み
CSS 宣言を貼り付けます。単純な property: value; ペア、または完全な .selector { ... } ルールブロック（セレクターと括弧は自動的に削除されます）のいずれかです。ツールは各宣言を通過し、Tailwind クラスにマッピングします。
- 直接キーワードプロパティ (
display、position、flex-direction、text-align、cursorなど多数) は、Tailwind 名に直接マッピングされます。例えば、display: flex→flex、position: relative→relative。 - スペーシングプロパティ (
margin、padding、gap、width、height、top/right/bottom/leftおよびそれらの辺ごとのバリアント) は、Tailwind の default spacing scale と照合されます。16pxがちょうど4ユニットである 1/4 rem (4px) ステップスケールで、padding: 16pxはp-4になります。shorthand 値 (margin: 0 auto、padding: 8px 16px) は、最小のマッチングクラスセットに展開されます (mx-auto、px-4 py-2など)。 - 色 (
color、background-color、border-color) は、Tailwind の完全な default palette (slate、gray、zinc、red、orange、... から stone まで、すべての 50–950 シェード) と照合されます。正確な hex マッチはtext-blue-500になります。その他は arbitrary-value クラス (text-[#123456]など) に fallback します。 - フォントサイズ、フォントウェイト、行の高さ、文字間隔、ボーダー半径、不透明度、z-index、ボックスシャドウ、トランジション、および多く は、同じ方法で対応する Tailwind スケールと照合されます。
- 直接 Tailwind ユーティリティがないもの (異常なプロパティ、各スケールの外の値) は、クラスリストとインラインで
/* property: value - No direct Tailwind equivalent */コメントとして出力されるため、何も暗黙的に削除されません。
結果は、入力宣言と同じ順序で、スペース区切りの単一の class 文字列です（plus 任意の fallback コメント）。class/className 属性に貼り付ける準備ができています。
使い方
- CSS 宣言、またはルール全体のブロックを、入力ボックスに貼り付けます。
- Tailwind class リストは入力時に自動的に生成されます。
- 結果をコピーするか、テキストファイルとしてダウンロードします。
FAQ
これはすべての CSS プロパティをカバーしていますか? いいえ。これは、Tailwind がダイレクト利用可能なプロパティ（layout、flexbox/grid、spacing、typography、colors、borders、effects、transitions）をカバーする最善努力の変換です。Tailwind に相当するプロパティは、推測されるのではなく、説明コメントとして残されます。
色が名前付きクラスではなく text-[#123456] になるのはなぜですか?
Tailwind の default palette の 1 つのシェードと正確に一致する hex 値のみが、名前付きクラス (text-blue-500 など) に解決されます。その他の hex または RGB 値は Tailwind の arbitrary-value 構文を使用します。これはクラス名として有効な CSS であり、設定を変更することなく機能します。
これはカスタム tailwind.config.js を考慮していますか?
いいえ。変換は Tailwind の default テーマスケールに基づいています。プロジェクトが spacing、color、または font-size スケールをカスタマイズした場合、提案されたクラスの一部が設定と一致しない可能性があります。arbitrary-value の fallback をそれらに使用し、独自のトークンで調整します。
私の CSS は何処に送信されますか? いいえ。すべては、ブラウザ内（または API を介して呼び出された場合、リクエストハンドラー内のみ）でローカルに実行されます。何も保存されません。