Tailwind Class Sorter

Paste a list of Tailwind CSS utility classes (the value of any class="…" attribute) and we'll reorder them into the canonical Tailwind class order — the same order prettier-plugin-tailwindcss and the Tailwind CSS IntelliSense rules ship. Works with v3 and v4, arbitrary bracket values, and every modifier form Tailwind supports. Nothing is uploaded.

Example class lists

Options

Separate classes with spaces, commas, tabs, or newlines. The sorter runs live on every keystroke — there's no "submit" step.

—

Per-tier breakdown

Each class is sorted into a tier that matches its position in tailwindcss/src/corePlugins.js. Use this to verify the sort or to spot unknown / custom classes that don't match any canonical Tailwind utility.

Canonical tier order

The class order is the order Tailwind itself uses when compiling your CSS — so later classes naturally win on cascade conflicts. For example, text-white placed after text-blue-500 overrides the blue.

  1. Layout — display (block, hidden), position (absolute, relative), inset, z-index, order, float, clear, box-sizing, aspect-ratio, columns
  2. Flexbox — flex, flex-direction / wrap, basis, grow, shrink, align, justify, place, content
  3. Grid — grid-cols, grid-rows, auto-flow, gap, space, divide
  4. Spacing — margin (m-, mx-, my-, mt-, …) and padding (p-, px-, py-, …)
  5. Sizing — width, height, min-w/h, max-w/h (incl. fractions and arbitrary values)
  6. Borders — rounded-*, border-*, border-style / color / opacity
  7. Backgrounds — bg-color, bg-image, gradient (from / via / to), bg-size, bg-position
  8. Typography — font-*, text-*, leading-*, tracking-*, placeholder, indent, line-clamp
  9. Effects — opacity, mix-blend, box-shadow, outline, ring
  10. Filters — blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate, sepia, backdrop-*
  11. Transitions — transition, duration, delay, ease, animate
  12. SVG — fill, stroke, stroke-width
  13. Accessibility — sr-only, not-sr-only, forced-color-adjust

Modifiers (responsive sm:, dark dark:, pseudo-classes hover: / focus: / active:, group / peer, container queries @md:, aria-[…], data-[…]) are stripped from the front of each class, sorted in canonical order, and reattached in the right slot. The important marker (!) sorts to the very front of the output.