TailwindのユーティリティクラスをコピペするだけでTailwind推奨順序に自動整列。レイアウト→ポジション→サイズ→スペーシング→タイポグラフィ→背景→ボーダー→エフェクト→トランジション→インタラクションの順でキレイに並べ替えます。

関連ツール：CSS変数ジェネレーター · CSSメディアクエリジェネレーター

入力モード

スペース区切りのTailwindユーティリティクラスを貼り付けてください。

結果

<div class="tw-diff" id="tw-ja-diff-wrap">
  <div class="tw-diff-box before">
    <div class="tw-diff-label before">並べ替え前</div>
    <div class="tw-diff-content" id="tw-ja-before"></div>
  </div>
  <div class="tw-diff-box after">
    <div class="tw-diff-label after">並べ替え後</div>
    <div class="tw-diff-content" id="tw-ja-after"></div>
  </div>
</div>

<label>ソート済み出力</label>
<div class="tw-output-wrap">
  <textarea class="tw-output" id="tw-ja-output" readonly rows="5"></textarea>
  <button class="tw-copy-btn" id="tw-ja-copy-btn" onclick="twJaCopy()">コピー</button>
</div>
💼
フリーランス・個人事業主の経理をまるごと自動化
freee会計なら確定申告・請求書・帳簿がすべて一元管理。開発者・フリーランスエンジニアに選ばれています。
freeeを無料で試す
※本記事にはアフィリエイト広告が含まれます。

ソート順の仕組み

Tailwind CSS公式のPrettier プラグイン と同じ推奨順序でクラスを並べ替えます。

グループ代表クラス例
レイアウトflex, grid, block, hidden, overflow-hidden
ポジションrelative, absolute, top-0, z-10
サイズw-full, h-16, max-w-md
スペーシングp-4, mx-auto, space-x-2
タイポグラフィtext-lg, font-bold, leading-tight, text-gray-900
背景bg-white, from-blue-500, bg-gradient-to-r
ボーダーrounded-xl, border, ring-2
エフェクトshadow-lg, opacity-75
トランジションtransition, duration-200, ease-in-out
トランスフォームscale-95, rotate-3, translate-x-1
インタラクションcursor-pointer, select-none

レスポンシブ（sm:, md:, lg:）・状態（hover:, focus:, dark:）バリアントは、対応するベースクラスグループの後ろにまとめてソートされます。

使い方のヒント

  • HTML要素モードはコンポーネントをまるごと貼り付けるときに便利。各 class="..." 属性を個別にソートします。
  • 重複削除はデフォルトでオンです。オフにすると元のクラス一覧がソートのみされます。
  • すべてブラウザ内で処理します。入力内容はサーバーに送信されません。

関連ツール：CSS変数ジェネレーター · CSSメディアクエリジェネレーター

確定申告・会計をもっとラクに？ freee会計 なら、フリーランスの経費管理もクラウドで簡単。まずは無料で試してみましょう。