Tailwind CSS Class Sorter

Your component has className="text-white p-4 flex bg-blue-500 rounded-lg items-center justify-between hover:bg-blue-600 font-bold text-lg". Every developer on the team orders the classes differently. PR reviews waste time debating class order. You need to sort them into the official Tailwind recommended order and remove the rounded-lg that was accidentally duplicated.

Why This Sorter (Not prettier-plugin-tailwindcss)

The Prettier Tailwind plugin requires project setup and CI integration. This tool sorts Tailwind classes instantly in your browser — paste a class string or full HTML, and it reorders classes by layout → flexbox/grid → spacing → sizing → typography → backgrounds → borders → effects → transitions → transforms → interactivity. Also removes duplicates and shows a before/after diff. No project setup needed.

What Is the Tailwind CSS Class Sorter?

The Tailwind CSS Class Sorter reorders your Tailwind utility classes into the official recommended order — the same order used by prettier-plugin-tailwindcss. You can sort a plain class string or paste full HTML/JSX and it will sort every class and className attribute automatically.

It also detects and removes duplicate classes and shows a visual before/after diff so you can see exactly what changed.

How to Use This Tool

1. Choose your input mode — “Class string” for a raw list of classes, or “HTML / JSX” for a full markup snippet
2. Paste your classes or markup into the input area
3. Click Sort (or the result appears as you type)
4. Review the diff — moved classes are highlighted, removed duplicates are shown in red
5. Copy the result — one click copies the sorted class string or the full sorted HTML

Why Sort Tailwind Classes?

Tailwind utility classes are order-independent at runtime — the final CSS output is determined by the stylesheet order, not the class attribute order. However, consistent ordering:

• Improves readability: Developers know exactly where to look for spacing, colors, or transitions
• Simplifies code review: Diffs only show meaningful changes, not random reorderings
• Prevents team conflicts: Everyone writes classes in the same order, eliminating merge noise
• Matches tooling: prettier-plugin-tailwindcss applies this order automatically in CI — sorting manually first avoids surprise auto-fixes

The Official Tailwind Class Order

The recommended order groups utilities into 15 categories:

Within each category, classes are secondarily sorted alphabetically for stable ordering.

Variant Prefix Handling

Responsive and state variants are respected in the sort. A class like dark:hover:text-white is sorted by its base utility (text-{color}) — the variant prefix moves with it. This means:

<!-- Before -->
<div class="hover:bg-blue-600 text-white bg-blue-500 dark:bg-blue-800 px-4 py-2">

<!-- After -->
<div class="px-4 py-2 bg-blue-500 hover:bg-blue-600 dark:bg-blue-800 text-white">

Duplicate Class Detection

The sorter removes exact duplicate classes in a single pass. Duplicates are listed below the output so you can see what was eliminated. Common causes of accidental duplicates:

• Copy-pasting a component and combining class strings without review
• Conditional class merging (e.g. clsx calls that can add the same class twice)
• Refactoring responsive overrides without removing the base class

HTML / JSX Mode

In HTML mode, the sorter processes every class="..." and className="..." attribute in your snippet. All other content — tag names, attributes, text, whitespace — is preserved exactly. Only the class attribute values are sorted.

<!-- Input -->
<button class="font-semibold hover:bg-blue-700 bg-blue-600 rounded-lg text-white px-4 py-2 transition">
  Click me
</button>

<!-- Output -->
<button class="rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white transition hover:bg-blue-700">
  Click me
</button>

Before/After Diff

The diff panel shows every class with a color indicator:

• Green — class kept, position unchanged
• Yellow — class kept, position changed (moved to correct category)
• Red — duplicate removed

Classes that were never in the original (e.g. custom classes outside Tailwind’s known prefixes) are placed at the end of the output and shown in the “unknown” count in the stats bar.

Unknown / Custom Classes

Utility classes that don’t match any known Tailwind prefix are placed at the end of the sorted output. This includes:

• Custom classes from your own CSS (.card, .hero-title)
• CSS Modules references
• Third-party plugin utilities (unless they follow standard Tailwind naming)
• Arbitrary value classes like w-[347px] (sorted by their base prefix: w-)

Note: Arbitrary value classes using square bracket notation are handled — w-[347px] is sorted in the w- (sizing) group, text-[#ff0000] in the text- (typography) group.

Integration with prettier-plugin-tailwindcss

This tool applies the same conceptual ordering as prettier-plugin-tailwindcss. To automate sorting in your project:

npm install -D prettier prettier-plugin-tailwindcss

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Then run prettier --write . to sort all class attributes in your project at once. Use this online tool when you need to sort a snippet without running Prettier locally, or to understand what order Prettier would apply.

Frequently Asked Questions

Does class order affect the final CSS output? No. Tailwind generates a single stylesheet where every utility is defined once. The class attribute order in your HTML has no effect on which styles are applied — specificity is determined by the order in the stylesheet, not the HTML. Sorting is purely for human readability and consistency.

Why are my custom classes placed at the end? Custom classes that don’t match any Tailwind prefix cannot be categorized by the sorter. They’re placed at the end rather than in a random position, so they’re always easy to find and don’t disrupt the Tailwind utility ordering.

Does this work with Tailwind v4? Yes. Tailwind v4 keeps the same utility naming conventions, so the class order categories remain valid. The main difference in v4 is the CSS-native configuration approach, but class names like flex, p-4, and text-sm are unchanged.

Can I use this with React/JSX? Yes. In HTML mode, the sorter handles both class="..." (HTML) and className="..." (JSX/TSX). Paste your component JSX directly into the input area.

What about clsx / cn / template literal class expressions? The sorter works on static strings. If you have dynamic class expressions like cn(`text-${size}`, 'flex'), sort the static parts manually or extract them to a constant first.

Does the sorter remove unused classes? No. The sorter only reorders and deduplicates — it does not analyze your markup to determine which classes are actually used. Use purgecss or Tailwind’s built-in content configuration for tree-shaking.