Tailwind CSS クラスを基本 CSS に変換

Tailwind CSS クラスを基本 CSS に変換

Tailwind v3 ユーティリティクラスの文字列を貼り付け、即座に同等のプレーンCSSルールを取得できます。各Tailwindクラスは、公式デザイントークンから正確なrem、px、および色値を含むCSS宣言に展開されます——推測や四捨五入なし。

Tailwindコンポーネントをvanilla CSSに移行するとき、内部宣言を確認するとき、またはTailwindビルドステップなしで手書きCSSを配布するときに便利です。

使用方法

1. 入力ボックスにTailwindクラス文字列を貼り付けます（例： flex items-center gap-4 p-6 bg-blue-500).
2. 選択子を変更するオプションがあります——デフォルトは .element.
3. 出力パネルに生成されたCSSを読み取ります。レスポンシブバリエント（md:, lg:…)は、対応する @media クエリに包まれます；状態バリエント（hover:, focus:…)はそれぞれの選択子を発行します。
4. 結果をコピーするか、ファイルとしてダウンロードできます。 .css ファイル。

機能

• 完全なスペーススケール – すべてのTailwindのマージン、パディング、ギャップ、幅、高さの値は、canonical remまたはpx出力に解決されます。
• 完全なカラーパレット – 22の色ファミリーと50～950のシェードが、テキスト、背景、ボーダー、フィル、ストロークの正確な16進数コードにマッピングされます。
• レスポンシブバリエント – sm:, md:, lg:, xl:と、 2xl: が適切な @media (min-width: ...) ブロックとして発行されます。
• 状態バリエント – hover:, focus:, active:, disabled:, group-hover:, peer-focus:, dark:, before:, after: およびその他が実際のCSS選択子またはメディアクエリになります。
• 任意の値 – サンプル形式の w-[37rem] または bg-[#abc123] は、対応する宣言にそのまま通過します。
• 負のユーティリティ – フォームの先頭にダッシュをつけて、例 -mt-4 は、正しい負のrem値を生成します。
• カスタム選択子 – 任意の選択子を選択して出力ルールを包みます（.card, #hero、など）。
• コピーとダウンロード – CSSを1クリックでコピーまたはファイルとして保存できます。