How to use the Tailwind Class Sorter
Sort your Tailwind classes in four steps:
1
Paste your code or class list
Paste JSX or HTML containing className/class attributes, or switch to Bare mode and paste a raw space-separated list of Tailwind utility classes.
2
Choose input mode
Select Auto to detect className and class attributes from JSX/HTML, or Bare to process a plain space-separated class list directly.
3
Review sorted output
The tool reorders classes into the canonical prettier-plugin-tailwindcss order. Unknown classes are sorted alphabetically at the end. Variant prefixes like hover: and md: are preserved.
4
Copy or download
Click Copy to copy the sorted output to your clipboard, or Download to save the result as a file.
When to use this tool
Use the Tailwind class sorter whenever consistency in Tailwind utility class ordering matters:
- →Standardising className ordering across a React or Next.js codebase before a code review
- →Cleaning up Tailwind classes copy-pasted from documentation examples or AI code generators
- →Preparing a PR diff that is easier to read because class order is predictable
- →Migrating a legacy HTML codebase to Tailwind and normalising the class order as you go
- →Checking the canonical position of an unfamiliar utility class in the Tailwind ordering system
- →Sorting bare class lists used in Tailwind's safelist or content configuration
- →Teaching new team members the conventional grouping order of Tailwind utility categories
Frequently asked questions
Q:What is the canonical Tailwind class order?
The canonical order is defined by prettier-plugin-tailwindcss and groups utility classes by function: layout (display, position, overflow), flexbox and grid, spacing (padding, margin, gap), sizing (width, height), typography, backgrounds, borders, effects, transitions, and transforms. Classes within each group are ordered by sub-type, matching the order Tailwind lists them in its documentation.
Q:Does the sorter support Tailwind variant prefixes like hover:, md:, and dark:?
Yes — the sorter preserves variant prefixes intact and sorts the full variant:utility string by the position of its base utility in the canonical order. So hover:flex sorts alongside flex, and md:text-lg sorts alongside text-lg. Multiple stacked variants like dark:hover:bg-blue-500 are also handled correctly.
Q:What is the difference between Auto mode and Bare mode?
Auto mode scans your input for JSX className={...} and HTML class="..." attributes, extracts the classes from each one, sorts them independently, and reconstructs the original code with sorted classes in place. Bare mode treats the entire input as a single space-separated list of Tailwind classes — useful when you have a standalone class string outside of markup.
Q:What happens to classes that are not recognised Tailwind utilities?
Unrecognised classes (custom utilities, third-party class names, CSS module classes) are sorted alphabetically and placed at the end of the sorted output. They are never removed — the sorter only reorders classes and never modifies or discards them.
Q:How does this compare to prettier-plugin-tailwindcss?
prettier-plugin-tailwindcss runs as part of a Prettier install and requires Node.js, a configured project, and Prettier in your toolchain. This online sorter provides the same canonical ordering instantly in the browser with no installation, making it ideal for one-off sorting tasks, onboarding, or environments where you cannot run Prettier locally.
Q:Is my code sent to a server?
No — the Tailwind class sorter runs entirely in your browser. Your code is never sent to any server, logged, or stored. This means it is safe to sort class names from private or proprietary codebases.