Tailwind Class Sorter
Sort Tailwind utility classes into the canonical order used by the official prettier-plugin-tailwindcss. Useful when you can't run the plugin (legacy projects, ad-hoc edits, AI-generated snippets) but want the same consistent ordering.
How to use the Tailwind Class Sorter
Paste HTML or JSX with class / className attributes containing Tailwind utilities. The sorter rewrites each attribute's classes into canonical order (layout → spacing → sizing → typography → colors → effects → variants last). Output preserves all other markup unchanged.
Sorting Tailwind classes canonically
Tailwind utility classes accumulate in whatever order you type them, so across a team the same element ends up written a dozen ways — producing noisy diffs and making class lists hard to scan. The official prettier-plugin-tailwindcss solves this by enforcing a canonical order, but you cannot always run it: on a legacy project, in a quick one-off edit, or on an AI-generated snippet.
This sorts the classes in each class or className attribute into that same canonical order — layout, then spacing, sizing, typography, colours, effects, and variants last — while leaving the rest of your markup untouched. To turn Tailwind utilities into plain CSS, the Tailwind to CSS converter does that; to format the surrounding stylesheet or markup, the CSS formatter and HTML formatter.
Common use cases
- Match the plugin — get prettier-plugin-tailwindcss order without running it.
- Tidy AI output — sort the classes in a generated snippet.
- Legacy projects — apply canonical order where the plugin is not set up.
- Calm your diffs — stop class reordering from cluttering reviews.
- Quick edits — sort one file’s classes on the fly.