使い方

貼り付け → 実行 → 確認 → コピー。すべてはブラウザ内で完結します。

CSS・HTML・JSON などをエディタに貼ります。アップロードはしません。

変換または実行をクリック。結果はすぐに表示されます。

生成コードと注意書きを公開前に確認します。

出力をコピーしてプロジェクトに貼り付けます。

このツールについて

HTML にインデントを付け、要素の入れ子構造がひと目で分かるようにします。スタイル変換の前やアクセシビリティのランドマーク確認に役立ちますが、無効なマークアップは修正されないため、バリデーターは引き続き必要です。

サンプルは 1 行にまとめられたコンパクトなヒーローブロックです。

入力

<section class="hero"><h1>CSS to Tailwind</h1><p>Convert utilities in the browser.</p><a href="/">Open</a></section>

出力

<section class="hero">
  <h1>CSS to Tailwind</h1>
  <p>Convert utilities in the browser.</p>
  <a href="/">Open</a>
</section>

インデントが想定外の位置までずれる場合、元のマークアップで閉じタグが抜けていることがほとんどです。