Tailwind Class Sorter

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

Class string input

19 classes

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

19 classes sorted

Sort Order Groups

Layout (display, position)

Positioning (top/right/…)

z-index, overflow

Flexbox direction/wrap

Flex alignment

Gap, order

Grid

Width / height

Padding

Margin

Typography

Background / gradients

Text color

Borders / rounded / ring

Effects / opacity / blur

Transitions / animation

Interactivity

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.