Tailwind CSS Class Sorter — Organize Utility Classes
Free online Tailwind CSS class sorter. Organize utility classes following the official recommended order with duplicate removal. No sign-up required.
19 classes
flex p-4 mx-auto mt-2 mb-4 w-full font-bold text-center text-white bg-blue-500 rounded border border-gray-200 transition-all duration-300 ease-in-out sm:w-1/2 lg:w-1/3 hover:bg-blue-700
Why Sort Tailwind CSS Classes?
Tailwind CSS class order affects readability and maintainability. The official Prettier plugin for Tailwind recommends a specific order: layout, flexbox/grid, spacing, sizing, typography, backgrounds, borders, effects, transitions, transforms, and interactivity. Consistent ordering makes code reviews easier and reduces meaningless diffs. This tool sorts your classes following that recommended order.
How to Sort Tailwind Classes
- Paste your Tailwind CSS class string into the input area.
- The tool instantly sorts classes following the official recommended order.
- Toggle Remove duplicates to clean up repeated classes.
- Click Copy to copy the sorted class string.
Common Use Cases
- Code Cleanup — Organize messy class strings when refactoring components or reviewing pull requests.
- Style Consistency — Ensure consistent class ordering across your team when the Prettier plugin is not configured.
- Quick Formatting — Sort and deduplicate classes copied from browser DevTools or design tools.
FAQ
Does this follow the official Tailwind sort order?
Yes. The sort order follows the Tailwind CSS Prettier plugin conventions: layout, flexbox/grid, spacing, sizing, typography, backgrounds, borders, effects, transitions, transforms, interactivity.
How are responsive prefixes handled?
Classes with responsive prefixes (sm:, md:, lg:, xl:) are sorted after base classes, in breakpoint order. State variants (hover:, focus:) are grouped similarly.
What about custom classes?
Custom classes that are not standard Tailwind utilities are placed at the end of the sorted output.