Tailwind class sorter

← All tools

Paste a class string — sort by layout → flex → spacing → sizing → type → colors → borders → effects, dedupe exact repeats, and flag obvious conflicts (e.g. p-2 + p-4).

Your classes never leave the browser — no upload, no server.

~~~

Paste classes or load the example to sort.

in out duplicates removed conflict groups

Sorted classes

By group
Duplicates removed
Property conflicts
Heuristic only — same CSS property (or overlapping padding) with the same variants.
~~~
About this tool
Class order does not change CSS specificity for utilities, but a consistent order makes diffs readable and matches what formatters like Prettier's Tailwind plugin do. Base utilities sort before variant-prefixed ones within each group.
Conflict detection is rule-based (display, spacing shorthand vs sides, font-size, colors, etc.). It will miss some edge cases and may flag intentional overrides.
~~~
Read more
~~~
Free books and courses
Get my programming books and courses as PDF and EPUB files.
Get the download library →