Sort Tailwind classes into the conventional order — layout → flex/grid → spacing → sizing → typography → visual → effects, base classes before variants — approximating the official Prettier plugin.
Show calculation steps
Processed privately in your browser — nothing you paste is uploaded, logged or stored.
Order is for humans
Utilities apply the same in any order — sorting is about the reader. When every component lists layout first and effects last, class strings become scannable and diffs stop lying. This sorter applies the convention the official Prettier plugin established: layout → flex/grid → spacing → sizing → typography → backgrounds/borders → effects → transitions → interactivity, with base classes ahead of responsive and state variants (breakpoints in size order, then states).
Worked example
Before: text-white hover:bg-blue-600 p-4 flex shadow-md md:p-6 items-center bg-blue-500
After: flex items-center p-4 bg-blue-500 text-white shadow-md md:p-6 hover:bg-blue-600Honest scope
- This is an APPROXIMATION of prettier-plugin-tailwindcss order — the plugin derives order from your actual config and generated CSS. For a codebase, install the plugin; this tool serves pasted snippets, review comments and codebases without a Prettier setup.
- Unknown/custom classes keep their original relative order — never dropped or shuffled.
The natural pipeline
- Validate (catch typos) → Clean (remove duplicates/conflicts) → Sort (this page) — paste once, run all three.
How to use the Tailwind Class Sorter
- Paste classes or markup.
- Click "Sort classes".
- Copy the reordered list — layout first, effects last, variants grouped after base classes.
Frequently asked questions
Why does class order matter if CSS specificity decides anyway?
For humans: consistent order makes class lists scannable and diffs meaningful. The utilities apply the same either way — sorting is a readability convention, the one the official Prettier plugin enforces.
Is this exactly the official Prettier order?
An approximation, stated honestly: layout → flex/grid → spacing → sizing → typography → backgrounds/borders → effects → transitions, with responsive and state variants after base classes. For guaranteed-official ordering in a repo, install prettier-plugin-tailwindcss; this tool covers pasted snippets and one-offs.
What happens to my custom classes?
Unknown classes keep their original relative order at the end of their group — never dropped, never shuffled among themselves.
