⌘ K
tailwind · class · order · live

Sort Tailwind classes

Reorders class / className attribute values by category (layout, flex, spacing, sizing, typography...) and variant (responsive, state). Modelled on the official Prettier plugin order. Runs locally.

Sort Tailwind Classes
Input
96 B
1 lines
Output
96 B
1 lines
Status
ready
live
Ratio
1.00×
out/in
input · html / jsx
output · sorted classes
<div class="flex items-center p-4 text-red-600 bg-white rounded-lg shadow-md hover:bg-gray-100">
Quick Start

How to sort Tailwind classes

Finds every class= or className= attribute, splits the value on spaces, sorts each class first by variant (responsive/state), then by category, then alphabetically.

  1. 01

    Paste markup

    HTML, JSX, Vue, or Astro — anything with class= / className= attributes.

    Parsing runs through Prettier’s standalone bundle (or the language-specific equivalent) loaded lazily — no parser ships until the tool is opened.

    htmlPrettierASTstandalonelazy
    input · sourceraw · AST
    <div class="p-4 flex">
    loaded · parsedAST · ready
  2. 02

    Classifier runs

    Each class is bucketed: layout, flexgrid, spacing, sizing, typography, background, border, effects, interactivity, transition, transform.

    Indent width, tab style, and print-width re-format through a memoised pass — switching 2 → 4 spaces never re-parses, only re-prints.

    scanindentprint-widthmemoisedlive
    buckets · options11 · live
    layout > flex > p/m > w/h
    options applied · livelive
  3. 03

    Watch classes sort

    Base classes first, then sm:/md:/lg:/xl:/2xl: in responsive order, then hover:/focus:/active:/disabled:/dark:.

    The formatter is deterministic and idempotent: running it twice produces byte-identical output, which keeps diffs and git noise to a minimum.

    liveidempotentdeterministicdiff-cleanstable
    out · formattedordered · ready
    flex p-4 text-red-600
hover:bg-gray-100
    formatted · liveidempotent
  4. 04

    Copy or download

    Paste back into your component or save. Source stays in your browser.

    Download writes a Blob with the language-appropriate extension; copy uses navigator.clipboard.writeText so the output preserves all whitespace exactly.

    exportclipboardbloblanguage MIMEclient-side
    ok · copiedready · done
    OK Copied
    shipped · ready to shipsuccess
Pro tips

Formatting tips that keep diffs sane

Pick one config and pin it

Inconsistent formatting causes diff churn. Commit .prettierrc / .editorconfig and enforce in CI.

Format on save

Editor integration is faster feedback than a pre-commit hook. Use both for belt-and-braces.

Idempotency matters

Running the formatter twice should produce identical output. Test this on a representative file.

Match the language community

Default to community conventions: 2 spaces for JS/CSS, 4 for Python, tabs for Go. Fights over indent are a productivity tax.

Print-width drives wrapping

80, 100, and 120 are the common targets. Wider lines parse fast but review slower side-by-side.

Don&rsquo;t mix formatters and linters

Prettier handles whitespace; ESLint handles correctness. Disable overlapping rules to avoid fight-club configs.

Related toolsSort CSS PropertiesSort ImportsCSS FormatterHTML FormatterJSX FormatterBootstrap to Tailwind
Use Cases

When to sort Tailwind classes

Design systems, code reviews, refactors.

Design systems

Enforce a deterministic order across components. Idempotent: running the formatter twice produces byte-identical output, which is the foundation of a clean CI gate. Pair with a pre-commit hook so PRs arrive already formatted, focusing review on logic.

idempotent

Code reviews

Stable class order yields smaller, cleaner diffs. Pairs with EditorConfig + .prettierrc for end-to-end consistency. Whitespace-only changes vanish so reviewers see real diffs, and git blame stays honest about who wrote what.

CI-ready

Bulk refactor

Re-order after bulk find-and-replace of utility names. Output respects your indent width, tab style, and print-width — settings carry over for repeat runs. Switching 2-space to 4-space costs nothing in CPU but standardises an entire codebase.

diff-clean

Pre-Prettier

Try the order before installing the official plugin. Format-on-save is the fastest feedback loop; CI is the safety net. Together they make inconsistent indentation a thing of the past and free up review cycles for genuine concerns.

PR-friendly

Snippet sharing

Tidy a one-liner before pasting in a chat or PR. Whitespace-only changes don't trigger downstream content-hash invalidations, so CDN cache keys and CI cache layers stay warm. Real changes get all the rebuild budget.

review-ready

Docs examples

Standardise Tailwind class lists in style guides. Pairs with linters (ESLint, Stylelint, pylint) that catch what formatting alone can't — bugs, unused imports, dead code. Each tool stays in its lane, and the codebase stays clean.

deterministic
FAQ

Frequently asked questions

No — it is a simplified port. The official plugin parses your tailwind.config.js for an exact order; this tool uses a built-in heuristic.
Only literal class= / className= attribute values are matched. Helper arguments are ignored.
Arbitrary values like [w-[3px]] split cleanly on spaces and are bucketed by their prefix.
Yes — duplicate classes are kept; sorting only reorders them.
No — sorting runs locally in your browser tab.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!