Tailwind Class Sorter
Reorder Tailwind utility classes into practical grouped conventions.
Sort Tailwind classes consistently
Long, unordered Tailwind class lists are hard to scan and produce messy diffs. This sorter reorders utility classes into a practical, grouped convention — layout, spacing, typography, color — so your markup reads consistently across the codebase.
Consistent class order makes components easier to read and review, and matches what formatters like Prettier’s Tailwind plugin do. Paste a class list, get it sorted, and copy it back into your element.
Cleaner class lists
A consistent utility order makes long class lists scannable and keeps diffs tidy. Sorting runs in your browser and never uploads anything.
Frequently asked questions
What order are the classes sorted into?
Container, display, position, sizing, margin and padding, gap, alignment, typography, background, borders and shadows, then transitions, with hover, focus, and breakpoint variants last. Classes in the same group sort alphabetically.
Is it the same order as the official Prettier plugin?
No. prettier-plugin-tailwindcss follows the order of Tailwind's generated CSS. This tool uses a simpler readable grouping, so do not mix the two on one project.
Does sorting change how the element looks?
No. Class order in the HTML attribute has no effect on which styles apply; sorting only makes the list easier to read and review.
Related tools
Practical utilities for front-end design and implementation work.