Tailwind CSS Class Sorter

Sort Tailwind classes in the recommended order — paste classes or full HTML/JSX.

Sorts classes following the Tailwind CSS Prettier plugin order.

What It Does

Tailwind CSS Class Sorter reorders your utility classes into the canonical order defined by the Tailwind team. Paste a raw class string or a full HTML/JSX snippet and get back perfectly sorted output. No configuration, no install — runs in the browser.

Sort Order Overview

  • Layout — block, flex, grid, hidden
  • Position — relative, absolute, top-0, z-10
  • Sizing — w-full, h-screen, max-w-xl
  • Spacing — p-4, mx-auto, gap-2
  • Typography — text-sm, font-bold, leading-relaxed
  • Visual — bg-white, border, rounded-lg, shadow
  • Interactive — cursor-pointer, transition, hover:, focus:

Common Examples

Before: text-white hover:bg-blue-700 font-bold px-4 bg-blue-500 rounded py-2

After: rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700

Tips

To enforce consistent sorting across your whole project automatically, add prettier-plugin-tailwindcss to your Prettier config. Use this tool for quick one-off sorting or when Prettier is not available in your environment.

Frequently Asked Questions

What order does this tool sort Tailwind classes into?
Classes are sorted following the same order used by the official Tailwind CSS Prettier plugin: layout and display first, then position, sizing, spacing, typography, borders, backgrounds, and finally interactive/state variants.
Why does class order matter in Tailwind CSS?
Tailwind generates styles based on specificity, not source order, so the visual output is unaffected. Consistent ordering matters for readability, code reviews, and diff cleanliness — especially on teams where multiple people touch the same templates.
Can I paste a full HTML or JSX element?
Yes. The sorter detects class="..." and className="..." attributes and sorts only the class values within them, leaving the rest of your markup untouched.
Does it handle responsive and state prefixes like sm: or hover:?
Yes. Prefixed variants like sm:flex, hover:bg-blue-500, and dark:text-white are sorted along with their base utilities, keeping variants grouped with their corresponding base class.
Is this the same as running prettier-plugin-tailwindcss?
It follows the same ordering algorithm as the Prettier plugin. The difference is this runs instantly in your browser with no setup, making it useful for one-off sorting, code review, or environments where Prettier is not configured.