Tailwind Sorter
Client-Side SecureFree online Tailwind Class Sorter. Automatically sort and deduplicate your Tailwind CSS classes. Keep your code clean and organized.
Tailwind Tidier
Official Sort Order & De-duplication.
Is this tool broken?
Let us know if you found a bug or have a feature request.
Tailwind CSS Class Sorter & Cleaner
Automatically sort your Tailwind utility classes, remove duplicates, and organize them into logical groups. This tool follows the Official Prettier Plugin order (Layout → Spacing → Sizing → Typography → Decoration) to make your code readable and maintainable.
Stop wasting time manually ordering `flex items-center justify-between p-4`. Just paste your messy class string, and get a standardized, clean result instantly.
Standard Sorting
Classes are sorted by category impact: Layout affects document flow, so it comes first. Decoration (shadows, colors) comes last. This makes scanning code much faster.
Conflict Detection
If you accidentally use `block` and `flex` together, or `p-4` and `p-8` on the same element, our tool will flag these conflicts so you can fix the layout logic.
Deduplication
Merging branches often leads to duplicate classes like `class="p-4 bg-white p-4"`. We instantly strip duplicates to keep your HTML payload small.
The Official Sort Order
- 1Layout (The "Box")container, display (flex/grid), position, z-index
- 2Positioning & Spacingtop/right/bottom/left, margin, padding, space-between
- 3Sizingwidth, height, min/max-width
- 4Typographyfont-size, weight, alignment, whitespace
- 5Visuals (Decoration)backgrounds, borders, shadows, opacity
- 6Interactivitytransitions, transforms, cursor, pointer-events
You might also like
Convert standard CSS to Tailwind classes and vice versa instantly.
Free online Diff Checker. Compare text, code, or JSON files side-by-side to find differences. Highlight changes.
Free online JSON to TypeScript Converter. Automatically generate TypeScript interfaces from your JSON objects. Save time and reduce errors.