Tailwind クラス変換ツール
宣言または Tailwind クラスを貼り付け、変換方向を選んで、各項目の対応状況と未対応項目を確認します。
宣言またはクラスを貼り付けて変換します。
対応
未対応
組み込み Tailwind v4 サブセットのみ。カスタムテーマと v3 の差異は読みません。
使い方
使い方
- CSS 宣言または Tailwind クラスを貼り付けます。
- 変換方向と、任意値または px から rem への変換を使うか選びます。
- 各変換結果と未対応項目を確認してからコピーします。
限定的な Tailwind v4 対応表
一般的な余白、色、タイポグラフィ、表示、flex、grid、境界線、角丸、影、位置指定をローカルで変換します。独自テーマや Tailwind v3 の差異は読み込みません。
未変換項目を黙って失わない
すべての宣言とクラスを変換済みまたは未対応として表示します。非対応値は p-[13px] のような任意値ユーティリティとして出力することもできます。
ローカル処理
解析と変換はブラウザー内で行います。スタイルシート、プロジェクト設定、貼り付けた内容はアップロードしません。
よくある質問
あわせて知りたいこと
tailwind.config を読み込みますか？
いいえ。独自テーマや Tailwind v3 の差異は読み込みません。内蔵表は Tailwind v4 の一部です。
未対応の宣言は破棄されますか？
いいえ。未対応一覧に残ります。プロパティが対応していれば任意値を有効にできます。
スタイルシート全体を変換できますか？
宣言行とクラス名を受け付けます。セレクター、ネスト、完全なスタイルシートは扱いません。