TailwindからCSS変換ツール

TailwindからCSS変換ツールは、Tailwind CSSユーティリティクラスを同等の プレーンCSS宣言に変換する無料のブラウザベースツールです。特定のTailwindクラスが 内部でどのような動作をするかを理解したい場合、レイアウトの問題をデバッグしたい場合、 またはTailwindプロジェクトの一部をバニラCSSに戻したい場合に、セットアップなしで 即座にわかりやすい出力を得られます。

Tailwind CSSは、すべてのクラスが1つ以上のCSS宣言にマッピングされる ユーティリティファーストのフレームワークです。例えば、flex items-center p-4は display: flex; align-items: center; padding: 1rem;に変換されます。 この1対1のマッピングがTailwindを強力にしていますが、すべてのユーティリティの 正確なCSS等価物を覚えるのは困難な場合があります。特にスペーシングスケール、 カラー値、レスポンシブブレークポイントについては難しいです。

この変換ツールは、レイアウト（flex、grid、block、hidden）、 スペーシング（p-*、m-*、gap-*）、サイジング（w-*、h-*、 max-w-*）、タイポグラフィ（text-*、font-*、leading-*、 tracking-*）、カラー（bg-*、text-*、border-*、完全なTailwindカラー パレット付き）、ボーダーとborder-radius（rounded-*、border-*）、 エフェクト（shadow-*、opacity-*）、トランジション、トランスフォーム、 cursor-*やselect-*などのインタラクティビティユーティリティを含む 包括的なTailwindユーティリティをサポートしています。

逆方向の変換（CSSからTailwindへ）が必要な場合は、 CSSからTailwind変換ツールをご確認ください。 Tailwindクラスをリアルタイムで視覚的にテストするには、 Tailwindプレイグラウンドをお試しください。 Tailwindテーマをカスタマイズする場合は、 Tailwind設定ビルダーが tailwind.config.jsファイルを視覚的に生成するのに役立ちます。

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

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

1. Tailwindクラス入力パネルにTailwind CSSユーティリティクラスを貼り付けるか入力します。スペースで区切って1行に入力するか、複数行に分けて入力できます。
2. ツールは入力中にリアルタイムでクラスを自動変換します。変換ボタンは不要です。
3. 右側（モバイルでは下部）のCSS出力を確認します。各Tailwindクラスは.elementセレクタブロック内のCSS宣言に変換されます。
4. マッピングできなかったクラスは、未マッピングクラスとラベル付けされたコメントとして下部に表示されます。これらにはカスタムTailwind設定または手動変換が必要な場合があります。
5. コピーをクリック（またはCtrl+Shift+Cを押す）して、生成されたCSSをクリップボードにコピーします。
6. クリアをクリックして両パネルをリセットし、最初からやり直します。
7. サンプルボタンを使用してサンプルTailwindクラスを読み込み、さまざまなユーティリティがどのようにCSSに変換されるか確認できます。