CSSを貼り付けるとセレクターごとにTailwind v4のクラスを、クラスを貼り付けるとCSSを返します。hover、focus、ブレークポイントはバリアントに対応し、変換できないものはすべて一覧表示されます。
通常のCSSルールを貼り付けると、セレクターごとにTailwind v4のクラス一覧を返します。デフォルトテーマに完全一致する値があれば名前付きクラスを、なければw-[37px]のような任意値を使います。方向を切り替えれば、クラス一覧をCSSに戻せます。クラスにできないセレクターやルールは一覧表示され、黙って削除されることはありません。
よくある宣言の変換例（Tailwind v4デフォルトテーマ）
スタイルシートを手作業でTailwindに移すと、何十ものクラス名を調べ、ピクセルからremへの計算を頭の中で行うことになります。この変換ツールは検索と計算を代わりに行い、スケールに丸めたほうがよい任意値のクラスを示し、CSSファイルに残す必要のあるルールをはっきり伝えます。
デフォルトテーマのTailwind v4です。スペーシングは0.25remの--spacingの値から計算され、角丸の名前はv4のスケール（rounded-xsは2px、rounded-smは4px、rounded-mdは6pxなど）に従い、ブレークポイントはv4のrem値を使います。
名前付きクラスは、まったく同じ値になる場合にのみ使われます。カラーコードがパレットの色と完全に一致することはまれなので色は常に任意値になり、名前付きの文字サイズは行の高さも設定するため、フォントサイズも任意値のままです。
子孫、兄弟、属性を含むセレクター、単一のmin-widthではないメディアクエリ、キーフレームなどのat-rule、カスタムプロパティです。これらは「未変換」の一覧に表示されるので、CSSファイルに移せます。
変換ツールの表にあるクラス、任意値、任意プロパティは正確に戻り、スペーシングはデフォルトの--spacingを前提としたrem値で表示されます。bg-blue-500のようなテーマの色名やプリセットの影は表に含まれないため、推測せずにスキップとして一覧表示します。
いいえ。ただし、[property:value]という任意プロパティの構文で、[mask-type:luminance]のようにTailwindにユーティリティがないものも書けます。この変換ツールは、認識できないプロパティにはこの構文を使います。
hover状態とタブレット用ブレークポイントを持つカードのルールです。
各宣言がクラスになり、hoverとブレークポイントのルールは同じ要素のプレフィックス付きクラスになります。
CSSルールまたはTailwindのクラス一覧を貼り付けてください。任意値はハイライトされ、変換できないものは結果の下に一覧表示されます。
変換の方向
CSS→Tailwind
Tailwind→CSS
CSS
Tailwindのクラス
CSS出力用のセレクター
結果
すべてコピー
クラスをコピー
ハイライトされたクラスは任意値です：{t}個中{n}個。
未変換（{n}）
すべて変換しました。
まだ変換するものがありません。
別の要素へのクラスかカスタムバリアントが必要なセレクター
単一のブレークポイントを持たないメディアクエリ
at-ruleはCSSに残します
カスタムプロパティはCSSまたは@themeに残します
この変換ツールの表にありません
無料で始める · クレジットカード不要