クラス
flex p-4
CSS
display:flex; padding:...
開発者ツール
Tailwind to CSS — ユーティリティクラス展開
Tailwind CSS のクラスリストを同等のネイティブ CSS 宣言に展開します。移行やレビュー、各ユーティリティが実際に適用する内容の学習に役立ちます。
TailwindCSSConvert
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
开发工具
Tailwind → CSS 変換
利用シーン
- Tailwind からプレーン CSS へ移行する
- クラスとプロパティの対応表を調べる
- コードレビュー中にスタイルを確認する
使い方
- 1 つ以上のクラス名を入力します
- 生成された CSS を読みます
- 必要なルールをコピーします
入出力サンプル
FAQ
カスタムテーマカラーには対応していますか？
デフォルトテーマの対応が最も充実しています。深いカスタム設定には tailwind.config の参照が必要な場合があります。
css-to-tailwind との関係は？
本ツールはクラスを CSS に展開します。逆方向のツールは CSS からクラスを提案します。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
CSSからTailwindへ変換
CSSからTailwindへ変換 - 宣言マッピング
CSS 宣言を貼り付けると、可能な範囲で Tailwind utility class へ変換します。一般的な layout、spacing、color ルールは標準 class に変換し、対応しない値は arbitrary-value 構文へフォールバックします。
CSS Tailwind 変換
CSS 単位変換
CSS 単位変換 - px、rem、em、vw
px、rem、em、pt、vw、vh、% の相互変換を行えます。root font size、親要素 font size、viewport size を設定し、レスポンシブ対応やデザインから実装への引き継ぎに活用できます。
CSS 単位 変換
Tailwindカラーチートシート
Tailwindカラーチートシート - フルスケール配色ボード
Tailwind CSS の配色スケール（50〜950 を含む）を 1 画面で確認できます。名前、スケール、HEX で検索し、utility class 名や生の HEX 値を CSS プロジェクト向けにコピーできます。
Design Tailwind CSS