Tailwind CSS Class Sorter
Sort and optimize Tailwind CSS classes following official recommended order — matching the behavior of prettier-plugin-tailwindcss.
Official Class Order Reference
About Tailwind CSS Class Sorter
This tool sorts your Tailwind CSS utility classes into the official recommended order, following the same logic as prettier-plugin-tailwindcss — Tailwind's official Prettier plugin. Consistent class ordering makes your code easier to read, review, and maintain across teams.
Classes are grouped into 15 semantic categories: Layout, Flexbox & Grid, Spacing, Sizing, Typography, Backgrounds, Borders, Effects, Filters, Tables, Transitions & Animation, Transforms, Interactivity, SVG, and Accessibility. Within each group, responsive and state variants are also ordered correctly.
How to Use
- 1 Paste your unsorted Tailwind CSS classes into the input box — copy them from your HTML, JSX, or Svelte templates.
- 2 Click Sort Classes to instantly reorder them following Tailwind's official recommended order.
- 3 Copy the sorted output and paste it back into your code. Toggle Class Breakdown to see classes organized by category.
Frequently Asked Questions
Why should I sort Tailwind CSS classes?
Consistent class order improves code readability, reduces merge conflicts in teams, and makes reviewing pull requests easier. Tailwind's core team recommends a specific order via their official Prettier plugin.
Does this match prettier-plugin-tailwindcss exactly?
This tool follows the same category order as the official plugin. For pixel-perfect sorting in your build pipeline, install prettier-plugin-tailwindcss directly in your project.
Does it support responsive and dark mode variants?
Yes. Classes with variants like sm:, hover:, dark:, and focus: are grouped with their base class and ordered by variant priority.
Where do unknown or custom classes go?
Classes that don't match any known Tailwind pattern are placed at the end in an "Other" category, so they're never lost.