CSSからTailwindへ変換
既存のCSSを貼り付け、Tailwindユーティリティへ移行するための下書きを作れます。移行、整理、短い書き換えの出発点に使えます。
変換結果がここに表示されます。
CSSからTailwindへ変換する理由
移行の下書きを作る
よくあるCSS宣言をユーティリティクラスの候補に変換し、手作業で1行ずつ置き換える時間を減らします。
任意値も残せる
標準ユーティリティがない値はTailwindの任意値として残し、あとからデザイントークン化する判断ができます。
確認しながら整理
出力をそのまま完成形とせず、繰り返し値をトークン、コンポーネント、バリアント、再利用クラスにまとめます。
変換しやすいCSSプロパティ
displaypositionmarginpaddingwidthheightcolorbackgroundborder-radiusfont-sizeflexboxz-indexopacity
:hover、::before、media query、複雑な selector は、変換後に手作業で確認する必要があります。
よくある質問
本番でそのまま使えるクラスが出力されますか？
いいえ。自動変換は下書きです。複雑なセレクタ、レスポンシブ指定、擬似要素、カスケード、コンポーネントの意味は人が確認します。
セレクタなしの宣言だけでも貼り付けられますか？
はい。単独の宣言は一時的にラッパーを付けて処理されます。
同じ任意値が何度も出た場合は？
UI全体で繰り返す値なら、テーマトークン、コンポーネントクラス、デザインシステムのプリミティブにすることを検討します。
media query や hover state も変換できますか？
単純な宣言は変換できることがありますが、レスポンシブバリアント、hover状態、擬似要素、入れ子のセレクタは手動確認が必要です。