Tailwind Class Sorter

Sort Tailwind CSS class strings in the recommended Prettier plugin order.

Presets:

Remove Duplicates

Tailwind Class String Input

Paste your raw tailwind CSS classes here. Whitespace will be normalized.

Sorted output

flex items-center gap-3 max-w-sm p-4 md:p-6 text-sm font-medium bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border-gray-200 rounded-lg shadow-md hover:shadow-xl duration-300 transition-all border

Original Classes

Sorted Classes

Duplicates Removed

Payload Size (Bytes)

210 → 210

Sort Order Groups (Recommended Prettier Order)

Layout (display, position)

Positioning (top/right/…)

z-index, overflow

Flexbox direction/wrap

Flex alignment

Gap, order

Grid columns/rows

Width / height

Padding (p-, px-, py-)

Margin (m-, mx-, my-)

Typography (text size, font-)

Background / gradients

Text color / opacity

Borders / rounded / ring

Effects / opacity / shadow

Transitions / animation

Interactivity (cursor, select)

SVG fill/stroke

Tailwind Class Sorter — organize Tailwind classes in Prettier plugin order

The prettier-plugin-tailwindcss automatically sorts Tailwind utility classes into a consistent order based on their CSS property groups. This makes diffs cleaner, code reviews easier, and long class strings more scannable at a glance. The ordering follows the same logical progression as the CSS cascade: layout and positioning first, then box model, spacing, typography, colors, borders, effects, and finally transitions. This tool applies the same grouping logic client-side so you can sort any class string without needing Prettier installed.

Private & free — this tool runs entirely in your browser.