Tailwind class sorter

Put a class list back in order: layout first, then the box, then what is inside it, with variants after the base classes they modify.

tw
Sortedtw
The result appears here

Questions

Why does class order matter at all?+

Not to the browser, which reads the stylesheet rather than the attribute. It matters to readers and to diffs: a consistent order means two components with the same classes look the same in review.

Is this the same as the Prettier plugin?+

It follows the same idea, layout outwards and variants last, over a property table rather than Tailwind's own resolved config. Use the plugin in your repository; use this for a class list you are reading somewhere else.

What happens to classes it does not know?+

They keep their relative order and go last, and they are listed under the output. That includes your own utilities and anything from a plugin, which no static table can place correctly.

Related tools

The tools are free. So is most of the library.

1935 blocks and 989 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

No signup for the tools. MIT for free blocks, commercial licence for Pro.

Markdown version