Tailwind Class Sorter
Reorder Tailwind CSS classes to match the official prettier-plugin-tailwindcss convention. Two modes: paste full JSX/HTML with className attributes, or paste a raw class string. Everything runs in your browser.
Paste above — sorted output appears here.About Tailwind Class Sorter
Tailwind CSS lets you compose designs from small utility classes, but a real-world className often accumulates 10-30 classes in inconsistent orders as different developers add to the same component. The result is diff noise, invisible duplicates, and code reviews that spend time debating class ordering instead of design intent. The official solution is prettier-plugin-tailwindcss, which sorts classes at format time — but that requires prettier configuration in your project and doesn't help for one-off sorting or codebases without prettier. This Tailwind Class Sorter provides the same functionality in the browser: paste JSX/HTML or a raw class list, get a sorted version, copy back.
The ordering rules mirror the official plugin closely: base classes first (with layout → box model → typography → visual → interactivity grouping), then interaction pseudo-classes (hover, focus, active, disabled), then responsive breakpoints (sm, md, lg, xl, 2xl), then dark mode, then print. Within each modifier tier, classes are grouped by CSS category and alphabetized. Snippet mode is the most useful setting: paste an entire JSX file and every className/class attribute gets sorted while everything around them stays untouched — perfect for cleaning up legacy components before a code review. For 100% fidelity with the official plugin's output on every edge case, you still need prettier-plugin-tailwindcss installed in your project, but this tool covers the 95% of practical cases without any setup.
How to Use
Choose Snippet mode to paste JSX/HTML with className/class attributes — every attribute gets sorted, code around them stays untouched.
Choose Raw mode to sort a plain space-separated list of Tailwind classes.
The sort order matches prettier-plugin-tailwindcss for the common cases: base classes first, then hover/focus states, then breakpoint variants (sm, md, lg, xl, 2xl), then dark mode.
Within each modifier group, classes are grouped by CSS category (layout → box → typography → visual) and alphabetized.
Copy the output back into your codebase.
Frequently Asked Questions
Why should I sort Tailwind classes?
Consistent class order makes diff reviews cleaner, catches duplicate classes, and matches the community convention set by the official Tailwind team (via prettier-plugin-tailwindcss). Diffs stop being noisy when two developers touch the same className.
Is this the same order as prettier-plugin-tailwindcss?
Close approximation, not identical. This tool uses a curated category-based ordering that matches the plugin for the vast majority of common classes. For 100% fidelity with the plugin, install prettier + prettier-plugin-tailwindcss in your own project. But for one-off sorting or codebases without prettier, this tool covers the practical cases.
Does this handle modifiers like hover:, dark:, md:?
Yes — modifiers are sorted by precedence: base classes first, then interaction states (hover, focus, active), then responsive breakpoints (sm, md, lg, xl, 2xl), then dark mode, then print. Classes with multiple modifiers (hover:md:bg-blue-500) sort by their combined weight.
What happens to custom classes or classes it doesn't recognize?
Unknown classes are pushed to the end of their modifier group and alphabetized among themselves. Custom utility classes, third-party plugin classes, and arbitrary values (bg-[#ff0]) sort predictably even if they don't match any Tailwind category.
Does this modify anything besides className?
No — in Snippet mode, only class and className attribute values are touched. All surrounding markup, JSX braces, template literals, and non-className text stays exactly as pasted. Safe to run on entire files.