0 chars
Sorted classes appear here
Paste classes and click Sort — or enable Live sort// sort Tailwind classes in the correct order
Paste Tailwind CSS classes and instantly sort them in Prettier order: layout first, then spacing, typography, colors, effects. Works on plain classes and HTML. Free, no sign-up.
Sorted classes appear here
Paste classes and click Sort — or enable Live sortUse "Classes only" to paste a raw class string from a class="" attribute. Use "Full HTML" to paste a complete HTML snippet and sort all class attributes at once.
Paste your Tailwind classes in the left panel. With Live sort enabled, results update instantly. Otherwise click the Sort button.
Click Copy to grab the sorted output. The category breakdown below shows how many classes belong to each Tailwind category group.
Tailwind Class Sorter reorders Tailwind CSS utility classes following the same order that prettier-plugin-tailwindcss uses — layout and display first, then box model, spacing, typography, backgrounds, borders, effects, and responsive variants last. It handles both raw class strings and full HTML.
Consistent class ordering makes code easier to read, diff, and review. When every developer writes classes in a different order, reviewing a pull request becomes harder because changes in class order look like substantive changes. Sorting classes in a predictable sequence — the same one Prettier uses — eliminates that noise and makes the intent of each change clearer.
The sort order mirrors the prettier-plugin-tailwindcss convention, which groups classes by their CSS property category: display and layout utilities first, then positioning, box model, flexbox, grid, spacing, sizing, typography, backgrounds, borders, effects, filters, transitions, and finally responsive and state variants. Unknown or custom classes are placed at the end.
Yes. Responsive prefixes (sm:, md:, lg:, xl:, 2xl:) and state prefixes (hover:, focus:, active:, dark:, group-hover:) are recognized and the base class name is used for sorting. All classes with the same base utility are grouped together with their prefixed variants following the unprefixed base class.
In HTML mode, the tool parses the input as an HTML document and processes every class="..." and className="..." attribute it finds. Each attribute's class list is sorted independently and the output is the complete HTML with all class attributes updated in place. This makes it easy to sort an entire component file at once.
No. Classes that are not recognised as Tailwind utilities are preserved and placed at the end of the sorted output. Only exact duplicates are removed, and only when the "Remove duplicates" option is enabled. Your custom class names, BEM classes, and any other classes will remain intact.
The sort order is based on the same published category sequence used by prettier-plugin-tailwindcss, but this tool is a browser-based approximation rather than running the actual plugin. For a production codebase, setting up Prettier with the official plugin gives you automatic formatting on every save. This tool is ideal for quick one-off sorting and for understanding the recommended order without a build tool setup.
Tailwind CSS makes styling fast by composing utility classes directly in HTML. But as class lists grow — a typical card component can easily reach 20 or 30 classes — they become hard to scan. When different developers write classes in different orders, the diff noise in pull requests grows, review becomes harder, and the cognitive load of reading the markup increases. A consistent sort order solves all of these problems at once.
The official recommended order, used by prettier-plugin-tailwindcss, groups utilities by their CSS property category rather than alphabetically. The sequence broadly follows: display and layout properties first, then positioning, the box model (width, height, margin, padding), flexbox and grid, typography, backgrounds and borders, visual effects, and finally animation and transition utilities. Responsive and state variants appear within their group, after the unprefixed base class.
This order reflects how developers tend to think about styles — first the structural properties that determine how an element participates in layout, then the decorative properties that control its appearance. Reading a sorted class list from left to right gives you a mental model of the element that progresses from structure to decoration.
When working on a component file that contains dozens of elements, manually sorting each class attribute would be tedious. HTML mode takes the entire file as input, extracts every class and className attribute, sorts each one independently, and returns the full file with all attributes updated. This is the same operation that prettier-plugin-tailwindcss performs on save in your editor.
Tailwind's variant system adds prefixes like sm:, md:, hover:, and dark: to any utility. The sorter strips the prefix when calculating sort position so that hover:bg-blue-500 sorts in the same position group as bg-blue-500. Multiple variants on the same base utility — bg-blue-500 hover:bg-blue-600 dark:bg-blue-400 — stay adjacent in the output.
Over time, class lists accumulate duplicates from copy-paste and incremental edits. The duplicate removal option finds every class that appears more than once and keeps only the first occurrence. This is particularly useful when merging class strings programmatically or when refactoring a component that was built up incrementally.