Paste your classes
Drop in a space-separated class attribute, in any order.
Tailwind Class Sorter
Paste a messy class list and reorder it into Tailwind's recommended layout, spacing, typography and state order — locally in your browser.
Sorted output
How it works
Click Sort classes
Each class is grouped by category — layout, spacing, typography and more.
Copy the result
Paste the consistently ordered class list back into your markup.
FAQ
What order does this tool use?
It follows the widely used Tailwind convention: layout, flexbox/grid, spacing, sizing, typography, backgrounds, borders, effects, transitions, transforms, then interactivity.
Does it handle responsive and state prefixes like hover: or md:?
Yes. A class like hover:bg-blue-600 is grouped with other background classes and placed after the unprefixed background classes.
Is my code uploaded anywhere?
No. Sorting happens locally in your browser and your class list is never sent anywhere.