CSS → Tailwind ユーティリティ
プライバシー優先設計 — すべてブラウザ内で処理します
左に CSS の宣言を貼り、右で Tailwind のユーティリティクラスをコピーします。コンバーターは spacing、色、タイポグラフィ、レイアウトの標準スケールをネイティブのユーティリティに割り当て、Tailwind が知らない値については角括弧記法にフォールバックします。
マッピング対象のプロパティ
コンバーターは日常的に書く CSS の領域を把握しています。padding と margin の spacing、フォントサイズと太さ、色(text と bg)、display、flex の方向と整列、border-radius、width と height、position、gap といったプロパティに対応します。それぞれが Tailwind の正式なショートカット(p-4、text-lg、justify-between など)に変換されるため、出力は手書きの Tailwind のように読めます。
arbitrary 記法が役立つ理由
実際のコードでは shortcut がない値が頻出します。13px のカスタムフォントサイズ、独自の hex で指定したブランドカラー、1.7rem の gap などです。コンバーターはこれらに対して Tailwind の arbitrary 形式(text-[13px] や bg-[#3b82f6])を出力します。結果のクラスは有効な Tailwind のままで、JIT に乗り、Tailwind-to-CSS 方向のラウンドトリップもきれいに通ります。
通過するだけになるケース
複雑なセレクタ、アニメーション、グラデーション、keyframes は意図的に変換しません。これらは Tailwind がプラグインや @apply で扱うレイヤーに属するため、ヒューリスティックなマッピングは正しさを偽ることになります。該当する宣言は [prop:value] の arbitrary クラスにそのまま出力され、元データを失わずに確認できます。
よくある質問
- どの CSS プロパティが対応していますか?
- padding と margin の spacing スケール、text と背景の色、display、flex の方向と整列、フォントサイズと太さ、border-radius、width と height、position、gap です。それ以外は [prop:value] の arbitrary クラスとして出力します。
- Tailwind の標準スケールに無い値の場合は?
- p-[13px] や bg-[#3b82f6] のような arbitrary 記法で出力されます。JIT がコンパイルし、クラスは手作業で直さなくても有効な Tailwind のままです。
- カスタムの CSS 変数も扱えますか?
- はい。var(--token) を含む値は角括弧で渡されます。トークン自体は tailwind.config のテーマか :root のカスタムプロパティとして宣言しておく必要があります。
- 変換はロスレスですか?
- 一般的なパターンならロスレスです。アニメーション、グラデーション、特殊セレクタは arbitrary クラスとして残るため、変換は通りますが元の CSS を併用したくなることもあります。
- Tailwind-to-CSS とラウンドトリップできますか?
- ほぼできます。単純なユーティリティは同一に戻り、arbitrary な値も残ります。ただし未対応の宣言は戻る側でも arbitrary 形式のままです。
- 何かがアップロードされますか?
- いいえ。変換はすべてこのブラウザタブで完結し、スタイルシートの内容はページから出ません。