Tailwind CSS Class Sorter
Sort Tailwind CSS utility classes into a canonical order instantly. Variants (hover:, md:, dark:), arbitrary values, and duplicates are preserved.
Loading tool...
What is Tailwind CSS Class Sorter?
The Tailwind CSS Class Sorter takes any whitespace-separated list of utility classes and reorders it into a deterministic canonical order — layout first, then box model, typography, backgrounds, borders, effects, and interactivity — while preserving variants, arbitrary values, and duplicates.
Key Benefits
- Consistent, review-friendly JSX with no tooling setup
- Fewer meaningless diffs in version control
- Variants grouped predictably next to their base utility
- Optional duplicate removal for cleaner class lists
Common Use Cases
- •Normalizing hand-written classNames during code review
- •Cleaning up class lists pasted from AI-generated or legacy code
- •Enforcing a shared class style on teams without a Prettier plugin
- •Auditing a class list for duplicates before committing
How to Use the Tailwind CSS Class Sorter
- Paste your classes: Copy a className string from your JSX and paste it into the input box, or click Load sample to try it out.
- Choose duplicate handling: Leave the Remove duplicates checkbox off to keep every class, or tick it to drop repeated tokens automatically.
- Review the sorted output: Classes appear instantly in canonical order: layout, box model, typography, backgrounds, borders, effects, interactivity. Variants stay grouped with their base utility.
- Copy the result: Click Copy and paste the sorted class list back into your code. Unrecognized custom classes sort last, alphabetically.
Key Features
- Canonical class ordering inspired by prettier-plugin-tailwindcss
- Full variant-chain support: dark:md:hover:bg-blue-500 stays intact
- Arbitrary values like w-[13px] and bg-[#1da1f2] preserved exactly
- Optional one-click duplicate removal
- Live stats: class count, duplicates, unrecognized tokens
- 100% client-side — your code never leaves the browser
Frequently Asked Questions
Does the sorter change how my styles render?
No. Class order in the class attribute does not affect CSS specificity in Tailwind, so the rendered output is identical — only the source text becomes consistent.
How does the order compare to prettier-plugin-tailwindcss?
The canonical order is inspired by prettier-plugin-tailwindcss: layout, box model, typography, backgrounds, borders, effects, and interactivity. It is a close approximation, not a byte-for-byte clone.
What happens to variants like md: and hover:?
Variant chains are preserved exactly and grouped with their base utility. Classes with fewer variants sort before deeper chains, so p-4 comes before md:p-8 before md:hover:p-8.
Are arbitrary values and custom classes safe?
Arbitrary values such as w-[calc(100%-2rem)] or bg-[#1da1f2] are kept intact, including colons inside brackets. Unrecognized custom classes are never dropped — they sort last, alphabetically.