Tailwind Class Sorter
Paste HTML or a space-separated class list and the tool reorders every class to follow the official Tailwind order: layout → positioning → box model → typography → backgrounds → effects → transitions → transforms → interactivity → SVG. Duplicates are removed. The HTML structure is preserved — only class attributes are rewritten — so you can paste a whole component and get a clean, consistent className string back.
How to use
- 1
Paste HTML or a class list
Drop a JSX/HTML snippet or just a space-separated string of Tailwind classes. Auto-detect picks the right mode.
- 2
Sort
Click Sort classes. Every class attribute (or the whole list) is reordered and deduplicated.
- 3
Copy or download
Use Copy to put the result on your clipboard, or Save to download it as sorted.txt.
- 4
Mix custom classes
Non-Tailwind classes (e.g. my-custom-widget) are kept at the end of each class attribute so nothing is lost.
Common use cases
- Standardise className order across a codebase before committing.
- Spot duplicate classes that snuck in during refactoring.
- Make code review easier by always presenting classes in the same order.
- Quickly find which classes are present in a long className string.
Limitations
- The sort order approximates the official
prettier-plugin-tailwindcssorder using category buckets. Edge cases (e.g. ordering of two classes in the same bucket) fall back to alphabetical. - Arbitrary value classes like
bg-[#ff0000]are bucketed with their prefix family. - Conditional class libraries (clsx, cva, twMerge) are not evaluated — only literal class strings are sorted.
- Comments inside class attributes are not preserved.