Tailwind Class Sorter

Understanding the Basics

Tailwind CSS is a utility-first CSS framework that composes styles by combining small, single-purpose utility classes directly in HTML markup. A single interactive card component might use 20–30 Tailwind classes for layout, spacing, typography, color, hover states, responsive breakpoints, and dark mode variants. When teams work on the same codebase without a consistent class ordering convention, class lists become messy and difficult to review: "p-4 bg-blue-500 flex text-white hover:bg-blue-600 rounded-lg items-center justify-between" contains the same information as "flex items-center justify-between rounded-lg bg-blue-500 p-4 text-white hover:bg-blue-600" but the latter follows Prettier's Tailwind plugin ordering, which groups classes by category — layout → flexbox → spacing → typography → background → border → interactivity. Consistent ordering dramatically improves code review legibility, helps teams spot duplicate or conflicting utilities (two padding classes accidentally applied), and aligns with the official Prettier Tailwind plugin (prettier-plugin-tailwindcss) which is the community-adopted standard. Our sorter applies the same ordering algorithm used by the official Prettier plugin, sorting classes within a className or class attribute while preserving all variants (responsive, dark, hover) intact.

How to Use the Tool

1. Paste your HTML or JSX code containing Tailwind class attributes into the input editor.
2. Click "Sort" — all class and className attributes are detected and their Tailwind utility classes are reordered.
3. The ordering follows the official Tailwind Prettier plugin convention: layout → display → flex/grid → positioning → sizing → spacing → typography → backgrounds → borders → effects → transitions → interactivity.
4. Custom classes (non-Tailwind utilities) are preserved and placed at the end of the class list.
5. Copy the sorted code or download it as a file for your project.

Key Features & Specifications

• Sorts Tailwind classes following the official prettier-plugin-tailwindcss ordering algorithm
• Works on both HTML (class="...") and JSX (className="...") attributes
• Handles responsive prefixes (sm:, md:, lg:), state variants (hover:, focus:, active:), and dark mode (dark:)
• Preserves non-Tailwind custom classes (places them at the end of the sorted list)
• Processes entire HTML/JSX files, sorting all class attributes in a single pass

Frequently Asked Questions (FAQ)

Q:Why should I care about Tailwind class order if CSS specificity isn't affected?

Class order within a class attribute does not affect CSS specificity or rendering — the browser applies the last-defined CSS rule when specificity is equal. Ordering is purely for human readability: sorted classes are predictable, easier to scan for duplicates, and produce cleaner git diffs (no spurious reordering changes in code review).

Q:Can I use this tool as a pre-commit hook alternative?

This tool is for manual or one-time sorting. For automated sorting on every save or commit, install prettier-plugin-tailwindcss in your project (npm install -D prettier-plugin-tailwindcss) and add it to your Prettier config. It will sort Tailwind classes automatically when Prettier runs in your editor or CI pipeline.

Q:What happens to conditional class expressions like cn() or clsx() in JSX?

Class names inside utility functions (clsx, cn, classnames, tw) are not automatically sorted — only direct string literals inside class/className attributes are processed. For dynamic class expressions, sort the class strings manually within each argument.