Tailwind Class Sorter

Sort Tailwind classes the way the Prettier plugin would

Tailwind projects usually standardise on the class order produced by prettier-plugin-tailwindcss: utilities in the order Tailwind emits them in its stylesheet, unknown classes first, responsive and state variants after their base classes. This Tailwind class sorter applies that order online — to a single class string, or to every class="…", className="…", className={`…`} and @apply in a block of HTML, JSX, Vue or CSS you paste — and shows what moved.

It is handy when you cannot run Prettier: a snippet in a code review, documentation examples, a CMS template, a quick tidy-up of a component copied from a design tool, or checking why two components with the same classes look different (the diff panel highlights duplicates and conflicting utilities).

Everything runs in your browser; nothing is uploaded. The sorter embeds Tailwind CSS v3.4’s utility and variant order rather than reading your project, so it is an approximation (see the limits below).

How to use the Tailwind Class Sorter

1. Paste a class string, or HTML / JSX / CSS containing class attributes, into Input. Auto-detect picks the mode; force it with Class string or HTML / JSX / CSS.
2. Read the sorted result on the right. It updates as you type; press Sort classes if live update is off.
3. Leave Remove duplicate classes on to drop exact repeats (the Prettier plugin does this too). Turn on Remove conflicting classes to keep only the last of utilities that set the same property with the same variants, such as p-2 p-4.
4. Check the diff panel: each attribute shows before and after, chips mark moved, unknown, assumed and removed classes, and hovering a chip names its utility group.
5. Press Copy and paste the result back into your code.

Tailwind Class Sorter features

The order, in brief

Tailwind generates one CSS rule per utility, in a fixed sequence; the Prettier plugin sorts by that sequence so the class list reads like the stylesheet. Simplified, the sequence is:

1. container, sr-only, pointer events, visibility, position and inset, z-index, order, grid placement, float and clear
2. margin, box-sizing, line clamp, display, aspect ratio, size / height / width and their min and max
3. flex and basis, table layout, transforms (origin-*, translate-*, rotate-*, scale-*), animation, cursor, touch, select, resize, scroll snap and margin
4. list style, appearance, columns, grid templates, flex direction and wrap, alignment and justification, gap, space and divide
5. overflow, overscroll, text overflow, whitespace and wrapping, border radius, border width / style / color, background colour, image, gradients, size, position and repeat, fill and stroke, object fit
6. padding, text align, font family, size, weight, transform and style, line height, letter spacing, text colour, decoration, placeholder, caret, accent, opacity, blend modes, shadow, outline, ring
7. filters and backdrop filters, transitions and their delay / duration / easing, will-change, contain, content

Worked example

text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800

becomes

bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3

Background colour is emitted before padding, padding before text colour; hover: is a pseudo-class variant, so it precedes the sm: breakpoint variants, and inside each variant the same utility order applies.

Where this differs from running the plugin

To tidy the markup around the classes, use the Code Beautifier; for a smaller production stylesheet, the CSS Minifier and HTML Minifier.

• No tailwind.config.js or @theme is read. Custom colours and fonts (bg-brand, text-primary, font-display) are assumed to be colour / font-family utilities and flagged as such; a custom spacing or breakpoint name is treated as unknown and kept first.
• A prefix (tw-) or a custom separator is not recognised; remove the prefix before sorting.
• Classes built dynamically (clsx(), cn(), Vue :class objects) are not touched, only literal attribute strings and @apply.
• The order table is Tailwind v3.4’s. Tailwind v4 sorts by the same principle with a slightly different utility list, so rare classes may land a few positions away from the plugin’s result.