DEV Community

Muhammad Awais
Muhammad Awais

Posted on • Originally published at webtoolshub.online

Stop Arguing About Tailwind Class Order - Sort Them Automatically (Free Tool)

#react #tailwindcss #webdev #javascript

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">
Enter fullscreen mode Exit fullscreen mode

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.

What the Official Tailwind Class Order Actually Is

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
Enter fullscreen mode Exit fullscreen mode

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.

The Problem With Manual Sorting

You already know this. It's not that sorting is hard — it's that it's:

  • Inconsistent — every developer has a slightly different mental model
  • Time-consuming — sorting 20 classes correctly takes longer than writing them
  • A distraction in code review — reviewers notice class order instead of logic
  • A git diff nightmare — two devs touching the same component produce changes on every line

The fix is automation. Either via prettier-plugin-tailwindcss in your project, or via an online tool for everything the plugin can't reach.

How to Use the Tailwind Class Sorter

The WebToolsHub Tailwind Class Sorter gives you three input modes:

Mode 1: Class String

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
Enter fullscreen mode Exit fullscreen mode

Real-time — sorts as you type. No button needed.

Mode 2: HTML Snippet

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>
Enter fullscreen mode Exit fullscreen mode

Every class attribute in the snippet gets sorted — multi-element components work fine.

Mode 3: JSX / TSX

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" />
Enter fullscreen mode Exit fullscreen mode

Toggle between class="..." and className="..." in the output wrapper format selector.

Features That Save Real Time

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.

The .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"]
}
Enter fullscreen mode Exit fullscreen mode

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.

When You Can't Use Prettier

There are real situations where the Prettier plugin isn't an option:

  • Legacy codebases — touching the Prettier config breaks other formatting rules that took months to settle
  • CMS templates — Twig, Blade, or Liquid files with Tailwind classes where Prettier doesn't have a parser
  • Email HTML — no Node.js toolchain, no Prettier
  • Design-to-code output — tools like Figma plugins, v0, or Locofy export unsorted Tailwind that you want cleaned before committing
  • Copy-pasted from docs — Tailwind docs, component library examples, and Stack Overflow answers all have unsorted classes

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 — Does Class Order Change?

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.

Does Class Order Affect Performance or Styling?

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:

  • Git diffs — consistent order = diffs only show real changes
  • Code readability — layout utilities always at the start, effects always at the end
  • Review speed — reviewers read class strings left-to-right; consistent order removes mental overhead
  • Duplicate visibility — sorted classes make it obvious when you've written flex and block on the same element

The developer experience argument is stronger than the technical one — but it compounds significantly at team scale.

Related Tools on WebToolsHub

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.

Try It

👉 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. 👇

Top comments (1)

Collapse
 
pranav_gore_297555a5b7dc2 profile image
Pranav Gore •

Hi, I hope you are doing well. We are a software development team. We hunt for US jobs using Us job profile. So we are looking for a senior developer who can work with us.
Your role is to take part in the job interviews and pass the interviews. If your English is fluent, we can work together. If you are interested, please kindly send me message. I will explain more detail. Thank you!
Whatsapp: +1 (351) 234-6532
Telegram: @lionking06230810