Tailwind Class Sorter

How to use

1. 1Pick an input type: Plain classes for a single space-separated class list, or HTML / JSX to sort every class and className attribute in a markup paste.
2. 2Choose whether exact duplicate classes should be kept (the default) or collapsed.
3. 3Paste your code into the input. The sorted output updates as you type. Use Load sample to see worked examples or Clear to start over.
4. 4Read the sorted result on the right, with a per-token stat panel showing input and output class counts and the number of attributes scanned.
5. 5Click Copy to grab the sorted output, or Use as input to feed the result back in for another pass.

About this tool

Tailwind Class Sorter rewrites a Tailwind CSS class list into the recommended order popularized by prettier-plugin-tailwindcss, entirely in your browser. Paste a single space-separated class list or a full HTML or JSX fragment, and the tool re-emits the classes in the canonical order: layout first (container, display, position, overflow, z-index), then flex and grid utilities (flex direction, grow, shrink, grid-cols, gap, justify, items), then spacing (m, p, space), sizing (w, h, min, max, size), typography (font, tracking, leading, text), backgrounds, borders (rounded, border, divide, ring, outline), effects (shadow, opacity, mix-blend), filters and backdrop filters, tables, transitions and animations, transforms, interactivity (cursor, scroll, select), SVG (fill, stroke), and finally accessibility utilities like sr-only. Variants sort by family: responsive variants come first in mobile-first order (sm, md, lg, xl, 2xl), then named state and pseudo variants (hover, focus, focus-within, focus-visible, active, group-hover, peer-checked, before, after, placeholder), then arbitrary variants like has-[input:checked]: and aria-checked:, with dark: at the end so a hover and dark hover pair stays visually grouped. The tokenizer is bracket-aware so arbitrary values such as text-[#ff0000], bg-[url('/img.png')], grid-cols-[1fr_2fr], and supports-[display:grid] are preserved verbatim, never split on internal colons, and never reformatted. HTML and JSX mode walks every class="..." and className="..." attribute in the pasted markup and sorts each one in place; dynamic className expressions like className={cn('foo', cond && 'bar')} are left untouched so the tool never breaks code. Optional deduplication collapses exact duplicate tokens (variants included) so hover:p-4 and p-4 stay as separate tokens but two hover:p-4 entries collapse to one. Stats show the input class count, output class count, attribute count when in HTML mode, and how many duplicates were removed. Useful for cleaning up a snippet pasted from a code review, a chat, a blog post, or any HTML and JSX that did not go through Prettier with the tailwindcss plugin enabled. The sorter only re-orders classes; it does not format JSX, normalize quotes, fix indentation, or run any other transformations. Unknown utility names (custom plugins, project prefixes, typos) are kept verbatim and placed at the end of their best-guess group alphabetically so the output is always usable. Everything runs locally in your browser; the code you paste here is never uploaded.

Free to use. Works in your browser. No signup, no login.