Skip to content
TextArray1.41.0
100% local

Tailwind class sorter

Sort utility classes in class/className attributes into Tailwind’s recommended order.

Input
Output
Related tools
CSS formatterDeveloper tools
CSS specificity calculatornewDeveloper tools
HTML formatterDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
Tailwind class sorter
Paste HTML or JSX and this tool reorders the classes inside every class and className attribute to match Tailwind CSS's recommended order — the same order used by prettier-plugin-tailwindcss: layout and positioning first, then flexbox and grid, spacing, sizing, typography, backgrounds, borders and effects, with responsive and state modifiers (hover:, sm:, dark:) placed after the base utility they modify. A consistent order keeps diffs small and pull requests easy to review, since "flex p-4 text-white" and "text-white p-4 flex" end up identical.
Choose whether to scan the whole pasted document for class and className attributes, or treat the input as a single bare list of classes. Non-Tailwind classes — your own component classes, or names this tool doesn't recognize — stay together at the start or end of each list. Turn on "Remove duplicate classes" to drop exact repeats, and "Warn about classes that cancel each other out" to flag pairs like p-4 and p-2, or block and hidden, that override one another when applied together — the count shows up in the live tally below the output. "Group responsive variants together" clusters every sm:, md: and lg: class at the end instead of interleaving each next to its unprefixed counterpart.
Classes inside a template literal with a JavaScript expression, like className={\`flex \${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4\`}, are left untouched by default since the tool can't know what a variable will render at runtime — turn "Leave dynamic classes untouched" off to sort around them instead. Output as the modified source code, ready to paste back into your editor, or as a plain sorted list, one class per line.
Everything runs locally in your browser — the HTML, JSX or class list you paste is never uploaded anywhere. When you're done, copy the result, download it as a .txt file, or send the output back into the input to run another tool on it.
FAQ
What order does it sort classes into?
The same recommended category order as Tailwind’s official prettier plugin: layout, flexbox/grid, spacing, sizing, typography, backgrounds, borders, effects, filters, transitions, transforms and interactivity, with modifiers like hover: and sm: placed after the base class they apply to.
Does it work with JSX and template literals, not just plain HTML?
Yes. It recognizes class="…", className="…" and className={`…`} template literals. A className set from a variable or a function call like clsx(…) can’t be parsed safely and is left as-is.
What counts as a "custom" class?
Any class the tool doesn’t recognize as a Tailwind utility — your own component classes, or classes from a plugin this tool doesn’t cover. Custom classes keep their relative order and are placed at the start or end of the list, based on the option you choose.
How does it detect conflicting classes?
It flags common cases: two classes that set the same scale-based property (like p-4 and p-2), and mutually exclusive keywords (like block and hidden, or text-left and text-right) applied with the same modifiers. It isn’t an exhaustive linter, but it catches the classes that most often creep in by mistake.
Is my code uploaded anywhere?
No. Class sorting runs entirely in your browser — the HTML, JSX or class list you paste never leaves your device.