Question 1

What order does this tool sort Tailwind CSS classes in?

Accepted Answer

This tool sorts classes following the official Tailwind CSS recommended order used by prettier-plugin-tailwindcss: Layout, Flexbox/Grid, Spacing, Sizing, Typography, Backgrounds, Borders, Effects, Filters, Transitions, Transforms, Interactivity, SVG, and Accessibility. Responsive and state variant prefixes are also sorted consistently.

Question 2

Does the sorter handle full HTML or just class strings?

Accepted Answer

Both. You can paste a single class string like 'mt-4 flex bg-blue-500' or full HTML markup. The tool detects HTML automatically and sorts the classes inside every class attribute while preserving the rest of your markup.

Question 3

What happens with custom classes that are not Tailwind utilities?

Accepted Answer

Custom classes that do not match any known Tailwind utility pattern are kept in place and placed at the end of the sorted class list. They are highlighted in yellow so you can easily identify them.

Question 4

Is this tool free to use?

Accepted Answer

Yes, this Tailwind CSS Class Sorter is completely free to use with no signup required. It runs entirely in your browser, so your code never leaves your machine.

Free Tailwind CSS Class Sorter

Need something more powerful?

NexTool on GitHub