Tailwind CSS Class Sorter
Sort Tailwind classes in the recommended order — paste classes or full HTML/JSX.
Sorts classes following the Tailwind CSS Prettier plugin order.
What It Does
Tailwind CSS Class Sorter reorders your utility classes into the canonical order defined by the Tailwind team. Paste a raw class string or a full HTML/JSX snippet and get back perfectly sorted output. No configuration, no install — runs in the browser.
Sort Order Overview
Common Examples
Tips
Frequently Asked Questions
- What order does this tool sort Tailwind classes into?
- Classes are sorted following the same order used by the official Tailwind CSS Prettier plugin: layout and display first, then position, sizing, spacing, typography, borders, backgrounds, and finally interactive/state variants.
- Why does class order matter in Tailwind CSS?
- Tailwind generates styles based on specificity, not source order, so the visual output is unaffected. Consistent ordering matters for readability, code reviews, and diff cleanliness — especially on teams where multiple people touch the same templates.
- Can I paste a full HTML or JSX element?
- Yes. The sorter detects class="..." and className="..." attributes and sorts only the class values within them, leaving the rest of your markup untouched.
- Does it handle responsive and state prefixes like sm: or hover:?
- Yes. Prefixed variants like sm:flex, hover:bg-blue-500, and dark:text-white are sorted along with their base utilities, keeping variants grouped with their corresponding base class.
- Is this the same as running prettier-plugin-tailwindcss?
- It follows the same ordering algorithm as the Prettier plugin. The difference is this runs instantly in your browser with no setup, making it useful for one-off sorting, code review, or environments where Prettier is not configured.