You've seen it in code reviews. Someone writes:
<div class="text-sm mt-4 hover:scale-105 p-4 flex bg-blue-500 rounded-lg font-bold">
And someone else comments: "Can you sort these classes?"
Then a 10-minute discussion starts about what "sorted" even means.
This happens on every Tailwind team that doesn't have Prettier enforced. And even on teams that do — legacy code, copy-pasted snippets, AI-generated components — unsorted classes sneak in constantly.
🛠️
Free Tool:[Tailwind CSS Class Sorter — WebToolsHub]— paste classes, HTML, or JSX. Sorted output instantly. Runs 100% in your browser.
The Tailwind CSS team maintains prettier-plugin-tailwindcss
— the official sorting plugin. The order it enforces follows a logical mental model:
Layout first → flex, grid, block, hidden
Flexbox/Grid → flex-col, items-center, justify-between
Spacing → p-4, px-6, m-2, gap-4
Sizing → w-full, h-screen, max-w-lg
Typography → text-sm, font-bold, leading-tight
Colors → bg-blue-500, text-white, border-gray-200
Borders → rounded-lg, border, ring-2
Effects last → shadow-md, opacity-75, transition, animate-spin
Responsive variants (sm:
, md:
, lg:
) and state variants (hover:
, focus:
, dark:
) sort directly after their base utility. So hover:bg-blue-600
lands just after bg-blue-500
.
The logic: read left to right and understand structure before appearance. Layout tells you what the element is. Colors tell you how it looks. Always in that order.
You already know this. It's not that sorting is hard — it's that it's:
The fix is automation. Either via prettier-plugin-tailwindcss
in your project, or via an online tool for everything the plugin can't reach.
The WebToolsHub Tailwind Class Sorter gives you three input modes:
Paste a raw class list:
Input:
text-sm mt-4 hover:scale-105 p-4 flex bg-blue-500 rounded-lg font-bold
Output:
flex bg-blue-500 rounded-lg p-4 mt-4 text-sm font-bold hover:scale-105
Real-time — sorts as you type. No button needed.
Paste a full element or component:
<!-- Input -->
<div class="text-white mt-8 flex p-6 bg-slate-900 rounded-xl shadow-lg items-center gap-4">
<span class="font-semibold text-lg text-blue-400 hover:text-blue-300">Label</span>
</div>
<!-- Output — all class attributes sorted -->
<div class="flex items-center gap-4 bg-slate-900 rounded-xl p-6 mt-8 text-white shadow-lg">
<span class="text-lg font-semibold text-blue-400 hover:text-blue-300">Label</span>
</div>
Every class
attribute in the snippet gets sorted — multi-element components work fine.
Same as HTML mode but finds className
attributes instead:
// Input
<Button className="text-white mt-4 flex hover:bg-blue-600 bg-blue-500 px-6 py-3 rounded-lg font-semibold" />
// Output
<Button className="flex bg-blue-500 hover:bg-blue-600 rounded-lg px-6 py-3 font-semibold text-white mt-4" />
Toggle between class="..."
and className="..."
in the output wrapper format selector.
Remove Duplicates toggle — catches copy-paste accidents like flex flex-col flex
before they reach production.
Custom prefix support — working on a project with tw-
prefix? Set it once and the sorter recognizes your classes correctly.
Ctrl+Enter shortcut — sort without reaching for the mouse.
Sort & Save History — last 5 inputs saved locally. Come back to a snippet you sorted earlier without repasting.
Random Example button — generates a realistically messy class string so you can see the algorithm in action before using your own code.
.prettierrc
Config — For Your Own Projects
The tool includes a .PRETTIERRC CONFIG SNIPPET
section with the exact config block you need:
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Copy it, paste into your project's .prettierrc
, install the plugin, and you'll never manually sort classes again. Every file save in VS Code will sort automatically.
For VS Code specifically, the VS CODE AUTOMATIC SORTING section in the tool walks you through installing Prettier Tailwind CSS
— the official plugin — so class order becomes automatic on every save.
There are real situations where the Prettier plugin isn't an option:
This tool covers all of those cases without touching your project setup.
If you're using our CSS to Tailwind converter to port existing stylesheets, run the output through this sorter before committing — converted classes often need a sort pass to match your project's conventions.
Same goes for our HTML to JSX converter — convert the structure, then sort the resulting className
strings here.
Tailwind v4 changed the configuration format significantly (CSS-first config, no more tailwind.config.js
), but the core utility ordering algorithm used by prettier-plugin-tailwindcss
remains compatible.
The sorter handles v4 class strings correctly, including updated arbitrary value syntax. If you're upgrading, the Tailwind CSS v4 migration guide covers the breaking changes and what they mean for your existing sorted class strings.
No — the order of utility classes in your HTML attribute does not affect CSS specificity or rendering. Tailwind's generated stylesheet handles specificity through its own selector structure. Class order on the element is invisible to the browser's CSS engine.
What it does affect:
flex
and block
on the same elementThe developer experience argument is stronger than the technical one — but it compounds significantly at team scale.
Working with Tailwind regularly? These tools fit the same workflow:
And on the blog side, the death of Material UI and the rise of headless components explains why Tailwind-first UI is now the default for new projects in 2026 — useful context if you're onboarding a team to utility-first CSS.
👉 Tailwind CSS Class Sorter — Free, No Signup, Client-Side
Paste your messiest class string. See it sorted in real time.
What's the most annoyingly unsorted Tailwind class string you've encountered in a code review? Drop it in the comments — let's see what the sorter does with it. 👇