Tailwind Class Sorter
Sort Tailwind CSS classes into the official Prettier plugin order, in a plain class list or straight inside your HTML and JSX.
Sorted output
Paste classes above and the sorted order appears instantly.
How it works
Paste a Tailwind class list, or a whole chunk of HTML or JSX, and every class and
className attribute is re-ordered in place, live as you type. The order follows the
one prettier-plugin-tailwindcss produces: utilities appear in the same sequence
Tailwind CSS v3 emits them in the generated stylesheet (position, then box model, then flex and
grid, then borders, backgrounds, spacing, typography, effects and transitions), unprefixed
classes come before variants, state variants such as hover: come before responsive
ones, and breakpoints run sm: through 2xl: last. Classes Tailwind does
not recognise are kept and moved to the front, which is exactly what the Prettier plugin does
with your own custom classes.
This is an implementation of that ordering, not the Prettier plugin itself: it reads the Tailwind
v3 core plugin order rather than your tailwind.config.js, so classes from custom
plugins, non-default theme keys and arbitrary variants are treated as unknown and grouped at the
front, and two utilities from the same group are ordered by their numeric value. In markup mode
only quoted attributes are rewritten (class="…" and className="…"); a
JSX expression such as className={clsx(…)} is left untouched rather than
guessed at. Everything runs in your browser in plain JavaScript, so proprietary markup never
leaves your device.
Frequently asked questions
What order does this sorter use?
The same one prettier-plugin-tailwindcss produces: utilities appear in the sequence Tailwind CSS v3 emits them in the generated stylesheet, so layout comes first, then the box model, flex and grid, borders, backgrounds, spacing, typography, effects and transitions. Unprefixed classes come before variants, state variants such as hover: come before responsive ones, and breakpoints run sm: through 2xl: last.
What happens to my own custom classes?
Classes that are not Tailwind v3 core utilities are kept exactly as written and moved to the front in their original order, which is what the Prettier plugin does with custom classes. They are also listed under the output so you can see what was not recognised. Because this tool reads the Tailwind core plugin order rather than your tailwind.config.js, classes from custom plugins, non-default theme keys and arbitrary variants land in that group too.
Can I paste whole HTML or JSX instead of a class list?
Yes. Paste markup and every quoted class="…" and className="…" attribute is re-sorted in place while the rest of the markup is left untouched. A JSX expression such as className={clsx(…)} is deliberately skipped rather than guessed at. Everything runs in your browser in plain JavaScript, so proprietary component code never leaves your device.