Format Conversion Hub
Tailwind ⇔ CSS 変換ツール SCSS・LESSも含めた4フォーマットを、1つの画面で好きな組み合わせに相互変換
Tailwindのユーティリティクラスをそのままの意味を保ってCSSプロパティに変換。逆にCSSをTailwindクラスへ変換することもできます。AIは使わず、ルールベースの変換エンジンがブラウザ内だけで動くので、コードを入力すればすぐに結果が返ります。
✓ AI不要・ルールベース変換 ✓ 登録・インストール不要 ✓ 入力コードは外部送信なし
仕組み：どのフォーマットも、内部では一度「CSSのルール一覧」に変換してから、目的のフォーマットに書き出しています。 SCSS/LESSの読み込みには実際のコンパイラ（libsass / less.js）をブラウザ上で使用しているため、変数・ネスト・組み込み関数もそのまま解釈されます。
SCSS/LESSが関わる変換は、初回のみコンパイラの読み込みに数秒かかる場合があります。
既知の制限
- Tailwindを変換元にする場合は、1行につき「セレクタ: クラス クラス ...」の形式で入力してください（例:
.btn: flex items-center p-4 hover:bg-blue-600）。 - Tailwindのクラス変換で収録しているのは代表的なデフォルトスケールの一部です（色は10色相 × 10段階）。一致しない値は任意値記法
[value] にフォールバックします。 - CSS/SCSS/LESS間のネスト変換は「空白・>・+・~」の階層関係と、同一ベースセレクタへの疑似クラス/追加クラスの検出（&構文）に対応しています。深い多段修飾は完全に検出できない場合があります。
- 色の変数抽出は2回以上登場した hex/rgb 値が対象です。
- SCSS/LESSの@media記述は、ネスト内部ではなく変換後のブロック末尾にまとめて出力されます（各言語のネイティブなネスト位置とは異なります）。
💡 Tailwind ⇔ CSS / SCSS / LESS 形式変換の基礎知識
■ なぜスタイル記法の変換が必要になるのか？
Web制作の現場では、プロジェクトごとに採用しているCSSの書き方（生のCSS、SCSSやLESSといったCSSプリプロセッサ、Tailwind CSSのようなユーティリティファーストのフレームワーク）が異なります。既存プロジェクトへの途中参加や、Tailwind導入前に書かれたCSSの移行、あるいはチームの技術方針変更などの場面で、既存のスタイル記法を別の形式に手作業で書き換える必要が生じます。この変換ハブは、そうした形式間の橋渡しをブラウザ内だけで手早く行うためのツールです。
■ 各形式の特徴と変換時に注意すべき点
SCSS/LESSはネスト構文（&による親セレクタ参照など）や変数、演算が使える反面、最終的にはCSSへコンパイルする前提の記法です。Tailwindはクラス名の組み合わせでスタイルを表現するため、既存のCSSセレクタ単位の指定とは考え方が根本的に異なり、機械的な変換には限界があります。変換後は必ず見た目を目視確認し、特にメディアクエリや疑似クラスの位置関係がずれていないかをチェックすることをおすすめします。
■ よくある質問 (FAQ)
Q. 変換結果は100%そのまま本番環境で使えますか？
目安としてお使いください。特にTailwindへの変換やネスト構造が深いSCSS/LESSは、意図した優先順位やカスケードと完全に一致しない場合があるため、変換後にビルド・表示確認を行ってください。
Q. 入力したコードはサーバーに送信されますか？
いいえ。変換処理はすべてお使いのブラウザ内（JavaScript）で完結しており、入力されたコードが外部サーバーに送信されることはありません。