What order does the sorter use?

It follows the official Tailwind recommended sequence: Layout, Positioning, Floats, Object fit, Overflow, Z-index, Flexbox/Grid, Spacing, Sizing, Typography, Backgrounds, Borders, Effects, Filters, Tables, Transitions/Animation, Transforms, Interactivity, and SVG. Classes are grouped by concern so related utilities sit together, and the ordering is fully deterministic - sorting an already-sorted list leaves it unchanged.

How are responsive and state variants handled?

Each class is matched on its base utility to decide its group, then its variants are re-attached, so hover:bg-blue-600 sorts right next to bg-blue-500 rather than drifting away. Within a group, the unprefixed base class comes first, then responsive variants in breakpoint order (sm:, md:, lg:, xl:, 2xl:), with state variants like hover: and focus: ordered sensibly. This mirrors how you would write mobile-first Tailwind by hand.

Can I paste a whole class="..." attribute?

Yes. The tool accepts a bare class list, a class="..." attribute, or a className="..." attribute - and when it detects an attribute wrapper it preserves the surrounding text and quotes, sorting only the classes inside. So you can paste an entire tag like , get back the same tag with its classes sorted, and drop it straight back into your markup.

How does conflict detection work?

With Detect conflicting classes on, the sorter flags utilities that set the same CSS property more than once within the same variant scope - for example two text colors, two background colors, or p-2 together with p-4. Because CSS applies whichever rule wins last, these are usually mistakes. Conflicts are scope-aware: p-4 and hover:p-2 are not flagged because they apply in different states, and text-sm with text-center is not a conflict because they control different properties.

What happens to arbitrary values and custom classes?

Arbitrary values such as w-[3px] and bg-[#1da1f2], and even arbitrary background-image URLs that contain a colon inside the square brackets, are kept completely intact and matched on their utility root. Any class that does not match a known utility pattern is sorted to the end of the list rather than dropped, so your custom classes and unknown utilities are always preserved in the output.

Does it change or rename any of my classes?

No. The sorter only reorders the classes you provide and, if you opt in, removes exact duplicates - it never renames or merges them. With duplicate removal off, every class you pass comes back unchanged, just arranged in the recommended order.

Is this the same as the Prettier plugin?

It applies a similar concern-based ordering for quick, one-off cleanups in the browser, plus extras the plugin does not surface - live duplicate and conflict reporting and optional line wrapping. It is independent of the official prettier-plugin-tailwindcss and needs no project setup. For automatic sorting on every save, the Prettier plugin is the right tool; this is handy for ad-hoc snippets, reviews, and spotting conflicts.

Tailwind Class Sorter

Sort Tailwind utility classes into the official recommended order — Layout, Flex/Grid, Spacing, Sizing, Typography, Backgrounds, Borders, Effects, Transitions, Transforms, Interactivity. Responsive (sm:, md:) and state (hover:, focus:) variants stay grouped with their base utility, and arbitrary values like w-[3px] are kept intact. Optionally remove duplicate classes, flag conflicting ones (two text colors, p-2 + p-4), and wrap long lines. Paste a bare class list or a full class="..." / className="..." string — the surrounding attribute is preserved. Everything updates live and is captured in a shareable URL.

About this ToolHow it works, benefits & use cases

A long, randomly-ordered className is hard to scan and harder to diff in review - this sorter reorders Tailwind utility classes into a consistent, recommended sequence and updates live as you type. Paste a bare space-separated list or a full class="..." / className="..." string and it groups the classes by concern: Layout, Positioning, Flexbox/Grid, Spacing, Sizing, Typography, Backgrounds, Borders, Effects, Filters, Transitions, Transforms, Interactivity, and SVG, following the official Tailwind ordering. Responsive and state variants stay grouped: each class is matched on its base utility, so hover:bg-blue-600 sorts next to bg-blue-500, and base classes come before their breakpoint variants (p-4 before sm:p-6 before md:p-8). Arbitrary values like w-[3px] and bg-[#1da1f2] are kept fully intact, and unknown or custom classes fall to the end so nothing is dropped. Optional toggles remove exact duplicate classes, flag conflicting ones (two text colors, p-2 + p-4 in the same scope), and wrap long output to a maximum line length. When the input is a class attribute, the surrounding markup is preserved, so you can paste a whole tag and get it back sorted. Load the example to see it in action, then copy, download, or share the result, or pipe it into another tool.

How to Use

1Paste a bare class list, or a full class="..." / className="..." string, or click Load example.
2The sorted output updates live in the recommended canonical sequence.
3Toggle Remove duplicate classes and Detect conflicting classes as needed.
4Optionally set a max line length to wrap long output across several lines.
5Copy, download, or share the result, or pipe it straight into another tool.

Key Benefits

Reorders classes into the official Tailwind concern-based sequence, live
Keeps responsive and state variants grouped with their base utility
Base classes sort before their breakpoint variants (p-4 before sm:p-6)
Preserves arbitrary values like w-[3px] and pushes unknown classes to the end
Optional duplicate removal with a list of exactly what was removed
Conflict detection flags two text colors, p-2 + p-4, and similar clashes
Accepts and re-emits a full class="..." / className="..." attribute
Optional line wrapping, plus copy, download, share, and pipe-onward

Common Use Cases

Cleaning up a messy className before committing for tidy diffs
Spotting accidental conflicts like two background or text colors on one element
Standardizing class order across a team without adding a build plugin
Sorting a whole class="..." attribute pasted straight from your markup
Tidying and de-duplicating classes pasted in from a snippet or generator

Sorted classes

Ordered by the official Tailwind concern sequence — updates live

Paste classes to see the sorted result here.

Unsorted Tailwind classes

A bare class list, or a full class="…" / className="…" string

Options

Remove duplicate classes

Detect conflicting classes

Wrap lines

Max characters per line (0 = single line)

Variants stay grouped

Each class is matched on its base utility, so hover:bg-blue-600 sorts right next to bg-blue-500. Base classes come before their responsive variants (p-4 before sm:p-6 before md:p-8).

Nothing is lost or renamed

Arbitrary values like w-[3px] and unknown or custom classes are preserved — unrecognized classes simply move to the end. The sorter only reorders; it never rewrites.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Related guide

Guide · 14 min readTailwind CSS v3 to v4: The Complete Migration Guide (2026)Tailwind v4 is a ground-up rewrite. The upgrade tool handles most of it, but the CSS-first config, the renamed utilities, the rebuilt dark mode, and the browser-support floor are where teams get stuck. Exactly what changed and how to move across cleanly.Read the guide

Tailwind Class Sorter

How to Use

Key Benefits

Common Use Cases

Options

Variants stay grouped

Nothing is lost or renamed

Was this tool helpful?

Share Your Experience

Related guide

Related tools

Frequently Asked Questions - Tailwind Class Sorter