Tailwind class sorter
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.
~~~