Paste your Tailwind CSS utility classes and get them sorted in the recommended order — layout first, effects last. Supports single class strings or multi-element HTML snippets.

Related tools: CSS Variables Generator · CSS Media Query Generator

Input Mode

Paste a space-separated list of Tailwind utility classes.

Results

<div class="tw-diff" id="tw-diff-wrap">
  <div class="tw-diff-box before">
    <div class="tw-diff-label before">Before</div>
    <div class="tw-diff-content" id="tw-before"></div>
  </div>
  <div class="tw-diff-box after">
    <div class="tw-diff-label after">After</div>
    <div class="tw-diff-content" id="tw-after"></div>
  </div>
</div>

<label>Sorted Output</label>
<div class="tw-output-wrap">
  <textarea class="tw-output" id="tw-output" readonly rows="5"></textarea>
  <button class="tw-copy-btn" id="tw-copy-btn" onclick="twCopy()">Copy</button>
</div>

How the Sort Order Works

The sorter follows Tailwind’s recommended class ordering — the same order enforced by the official Prettier plugin for Tailwind CSS :

GroupExamples
Layoutflex, grid, block, hidden, overflow-hidden
Positioningrelative, absolute, top-0, z-10
Sizingw-full, h-16, max-w-md
Spacingp-4, mx-auto, space-x-2
Typographytext-lg, font-bold, leading-tight, text-gray-900
Backgroundsbg-white, from-blue-500, bg-gradient-to-r
Bordersrounded-xl, border, ring-2
Effectsshadow-lg, opacity-75
Transitionstransition, duration-200, ease-in-out
Transformsscale-95, rotate-3, translate-x-1
Interactivitycursor-pointer, select-none

Responsive (sm:, md:, lg:) and state (hover:, focus:, dark:) variants are sorted after their base-class group.

Tips

  • HTML mode is useful when you paste a full component — every class="..." attribute is sorted independently.
  • Remove duplicates is on by default. Turn it off to see the full original class list sorted.
  • The sorter works entirely in your browser — no data is sent anywhere.

Related tools: CSS Variables Generator · CSS Media Query Generator