CSSからTailwind変換ツール

CSSからTailwind変換ツールは、プレーンCSSの宣言を同等の Tailwind CSSユーティリティクラスに変換する無料のブラウザベースツールです。 既存プロジェクトを従来のCSSからユーティリティファーストのワークフローに 移行する場合や、特定のCSSプロパティに対応するTailwindクラスを学びたい場合に、 インストールやビルドステップなしで即座にわかりやすい出力を得られます。

Tailwind CSSは、ユーティリティファーストのアプローチにより最も人気のある CSSフレームワークの一つとなっています。カスタムクラス名や別のスタイルシートを 書く代わりに、flex、items-center、p-4、text-lgのような 小さな単一目的のクラスをマークアップ内で直接組み合わせてスタイルを構成します。 このアプローチにより、HTMLとCSSファイル間のコンテキスト切り替えが減り、 命名に関する議論がなくなり、自動的なデッドコード除去によって生成されるCSS バンドルを小さく保つことができます。

この変換ツールは、レイアウト（display、position、flexbox、grid）、 スペーシング（padding、margin、gap）、サイジング（width、 height、max-width）、タイポグラフィ（font-size、font-weight、 line-height、text-align）、カラー（background-color、color、 border-color）、ボーダー、border-radius、box-shadow、opacity、z-index、 overflow、cursor、transitionsなど、幅広いCSSプロパティをサポートしています。 一般的なHEXカラー値は、最も近いTailwindカラーパレット名にマッピングされます （例：#3b82f6はbg-blue-500に変換）。

すべての処理はネイティブJavaScriptを使用してブラウザ内で完全に行われます。 CSSコードがデバイスから送信されることはなく、サーバーとの通信、ログ記録、 入力データに対するサードパーティの分析はありません。これにより、プロプライエタリ なスタイルシートや社内コードベースでも安全に使用できます。

標準のTailwindユーティリティクラスに直接マッピングできないプロパティは、 出力内にコメントとして表示されるため、手動での対応やカスタムTailwind設定が 必要な箇所を常に把握できます。

1. 左側のCSS入力パネルにCSSルールを貼り付けます。各ルールにはセレクタと波括弧内の宣言セットを含めてください。
2. 自動変換が有効の場合、ツールは自動的にCSSをTailwindクラスに変換します。無効の場合は、変換ボタンをクリックするか、Ctrl+Enterを押してください。
3. 右側のTailwind出力を確認します。各CSSセレクタはコメントとして表示され、その後にマッピングされたTailwindクラスを含むclass="..."文字列が続きます。
4. マッピングできなかったCSSプロパティは、未マッピングプロパティとラベル付けされたコメントとして表示されます。これらにはカスタムTailwind設定または手動変換が必要な場合があります。
5. コピーをクリックして出力をコピーするか、クリアで両パネルをリセットします。
6. サンプルボタンを使用してサンプルCSSを読み込み、変換ツールがさまざまなプロパティをどのように処理するか確認できます。
7. キーボードショートカット：Ctrl+Enterで変換、Ctrl+Shift+Cで出力をコピー。