← All Tools

Tailwind Class Sorter

Reorder Tailwind utility classes into the canonical prettier-plugin-tailwindcss order so diffs stay clean and class strings stay readable. Paste raw classes or whole HTML — the tool rewrites every class="…" in place, dedupes repeats, and groups responsive / state variants last.

Input

Sorted output

0 classes 0 dupes removed 0 moved 0 chars saved

How the order is decided

Each class is bucketed by its property prefix (everything before the first numeric / colour value). The buckets follow the order used by prettier-plugin-tailwindcss:

  1. Layout — container, flex, grid, block, inline, hidden, columns, break, positioning
  2. Flexbox & Grid — justify, items, self, place, order, gap, col, row
  3. Spacing — margin (m, mt, …) then padding (p, pt, …) then space-
  4. Sizing — w, h, min-w, max-w, min-h, max-h
  5. Typography — font, text, leading, tracking, antialiased, uppercase, italic, underline
  6. Backgrounds — bg, from, via, to
  7. Borders — border, rounded, divide, ring, outline
  8. Effects & Filters — shadow, opacity, blur, brightness, backdrop-
  9. Transitions & Transforms — transition, duration, ease, animate, transform, scale, rotate
  10. Interactivity — cursor, pointer-events, select, resize, scroll
  11. Accessibility / SVG — sr-only, fill, stroke

Variants (hover:, focus:, md:, dark:, group-hover:, etc.) are stripped to find the underlying utility, then the prefix order is appended afterwards: responsive (sm → 2xl) before state (hover, focus, active) before dark mode, so a class like md:dark:hover:bg-blue-600 always lands together with other bg-* utilities but later than the plain bg-blue-500.

Arbitrary values (w-[42px], bg-[#fafafa]) and custom prefixes are kept in the same bucket as their base utility.