Tailwind ユーティリティ → CSS
プライバシー優先設計 — すべてブラウザ内で処理します
Tailwind のユーティリティクラスのリストとセレクタを貼り付けると、Toova が対応する CSS ルールを組み立てます。p-[13px] や [grid-template-columns:1fr_2fr] のような arbitrary クラスは生の宣言として展開され、そのままスタイルシートに貼り付けられる形になります。
逆方向が役立つ場面
Tailwind でプロトタイプしたあと、Tailwind を読み込まない CMS への引き渡しやマーケティングメール、サードパーティウィジェットへの組み込みなどで CSS を提供したいことがあります。コンバーターはユーティリティのリストを、選んだセレクタの単一ルールにまとめます。プレイグラウンドの DOM から剥がさず、貼り付けるだけで終わります。
arbitrary な値の戻し方
Tailwind の arbitrary クラスは値をそのまま持ち運びます。p-[13px] は padding: 13px、[grid-template-columns:1fr_2fr] は grid-template-columns: 1fr 2fr のように展開されます。両方の形式を逐語的に解凍するため、JIT 経由でコードしたあらゆるカスタム値はマッピングテーブル無しで往復します。
制限と往復
レスポンシブ (md:flex)、状態 (hover:bg-black)、ダークモード (dark:text-white) のバリアントはメディアクエリや擬似クラスのラッパーが必要で、まだ出力対象ではありません。貼り付け前に取り除いてください。テーマトークン (text-brand など) はデフォルトの Tailwind スケールに落ち、カスタムテーマでは arbitrary フォールバックが発生します。プレーンなユーティリティは CSS-to-Tailwind ツールときれいに往復します。
よくある質問
- 何が変換されますか?
- spacing、色、タイポグラフィ、flex、position といった一般的な Tailwind ユーティリティに加え、任意の [value] や [prop:value] です。バリアントはまだ未対応です。
- なぜセレクタを指定する必要があるのですか?
- 出力は単一の CSS ルールです。セレクタを決めておけば、リネームや再ラッピングなしでスタイルシートに直接貼り付けられます。
- レスポンシブやホバーのバリアントは対応していますか?
- 現状未対応です。メディアクエリや擬似クラスのラッパーが必要なため、貼り付け前に md:、hover:、dark: の接頭辞を取り除いてください。基本ユーティリティは綺麗に往復します。
- 私の Tailwind テーマを知っていますか?
- 把握していません。デフォルトスケールを使うため、カスタム spacing や色は arbitrary フォールバックとして出力されますが、それでも動く CSS が得られます。
- 逆方向のツールで CSS を再変換できますか?
- できます。プレーンなユーティリティであれば往復は完全一致です。arbitrary 値は保たれ、対応外の宣言は arbitrary クラスとして残ります。
- 入力はアップロードされますか?
- されません。すべての処理はこのタブ内で完結し、Toova はクラス一覧やセレクタ、出力を見ません。