Tailwind Class Sorter

Sort Tailwind CSS class strings in the recommended Prettier plugin order.

Presets:

Remove Duplicates

Tailwind Class String Input

Paste your raw tailwind CSS classes here. Whitespace will be normalized.

Sorted output

flex items-center gap-3 max-w-sm p-4 md:p-6 text-sm font-medium bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border-gray-200 rounded-lg shadow-md hover:shadow-xl duration-300 transition-all border

Original Classes

Sorted Classes

Duplicates Removed

Payload Size (Bytes)

210 → 210

Sort Order Groups (Recommended Prettier Order)

Layout (display, position)

Positioning (top/right/…)

z-index, overflow

Flexbox direction/wrap

Flex alignment

Gap, order

Grid columns/rows

Width / height

Padding (p-, px-, py-)

Margin (m-, mx-, my-)

Typography (text size, font-)

Background / gradients

Text color / opacity

Borders / rounded / ring

Effects / opacity / shadow

Transitions / animation

Interactivity (cursor, select)

SVG fill/stroke

Tailwind Class Sorter — organize Tailwind classes in Prettier plugin order

The prettier-plugin-tailwindcss automatically sorts Tailwind utility classes into a consistent order based on their CSS property groups. This makes diffs cleaner, code reviews easier, and long class strings more scannable at a glance. The ordering follows the same logical progression as the CSS cascade: layout and positioning first, then box model, spacing, typography, colors, borders, effects, and finally transitions. This tool applies the same grouping logic client-side so you can sort any class string without needing Prettier installed.

Built and maintained by Meet Shah · Last updated 18 July 2026

What this tool is used for

Normalising class order across a file so diffs show real changes rather than reordering.
Matching the order the Prettier plugin would produce without installing it.
Tidying a component after several edits have appended classes at the end.
Making two similar components comparable by sorting both.
Spotting a duplicated or conflicting utility once the order is canonical.

Frequently Asked Questions

Why sort utility classes at all?: Because a consistent order makes a class list scannable and a diff meaningful. Two developers writing the same styles in different orders produce a diff that looks like a change, which is the same argument as for any formatter.
What order does the official plugin use?: Roughly the order the utilities appear in the generated stylesheet — layout, then box model, then typography, then visual, with variants like `hover:` and `md:` grouped after their base. It is deliberately not alphabetical, because that would separate related properties.
Does the order affect what renders?: No. CSS specificity is decided by the stylesheet, not by the order of names in the attribute, so `p-4 m-2` and `m-2 p-4` are identical. The exception is two conflicting utilities, where the one later in the generated CSS wins regardless of class order.
How are conflicts resolved?: By source order in the compiled stylesheet, which is why `p-4 p-8` gives whichever Tailwind emits later rather than the one written last. That is a real source of confusion, and it is why conflicting utilities should be resolved rather than relied on.
Should sorting be automated?: Yes — `prettier-plugin-tailwindcss` does it on save, which removes the question from code review entirely. Manual sorting is a rule nobody follows consistently, and an inconsistently applied convention is worse than none.

Common errors and gotchas

Assuming order affects the cascade. Utility order in the attribute does not decide which wins; the generated CSS order does.
Sorting a string that contains a template expression, which can move a class out of its conditional.
Expecting conflicts to be resolved. Sorting reveals two competing utilities; it does not remove either.
Sorting arbitrary values inconsistently, where a bracketed value may not have a defined position.
Reformatting a file the project's own plugin will re-sort differently, producing churn on every save.