Tailwind Class Sorter — Sort & Group Tailwind CSS Classes Online

A Tailwind CSS class formatter takes a raw string of utility classes — possibly in random order, with duplicates, and mixed with responsive and state variants — and produces a clean, consistently ordered result. It sorts classes into logical categories (Layout, Spacing, Typography, etc.), removes duplicates, and optionally outputs the result as a single flat string or as labeled category groups. The goal is to make class strings readable and auditable at a glance, the same way a code formatter like Prettier makes JavaScript or CSS readable.

Tailwind's utility-first model produces class strings that grow organically over time, with each class added wherever the developer happened to put it. Unsorted strings are difficult to review, hard to audit for conflicts, and prone to accidental duplication. Sorted classes group related utilities together — all spacing tokens appear together, all typography tokens appear together — so the visual structure of the element is immediately apparent during a code review or debugging session. Consistent ordering also reduces merge conflicts when multiple developers edit the same component.

The formatter groups classes into: Layout (positioning, display, overflow, z-index), Flexbox & Grid (flex direction, gap, justify, align, grid columns), Spacing (padding, margin, space-between), Sizing (width, height, min/max), Typography (text size, font weight, leading, tracking, decoration), Background (bg-color, gradients), Border (border-width, rounded, ring, outline), Effects (shadow, opacity, blur, backdrop), Transitions (transition, duration, ease, animate), Transforms (scale, rotate, translate), Interactivity (cursor, pointer-events, select, scroll-snap), SVG (fill, stroke), and Accessibility (sr-only, not-sr-only). Any class that does not match a known pattern is placed in an Other group.

Yes. When the Dedup option is enabled (on by default), the formatter identifies every class that appears more than once in the input and removes the extra occurrences. The stats bar shows the total duplicate count and highlights it in red when duplicates are found. Duplicate classes are harmless from a CSS perspective — Tailwind compiles them to identical output — but they inflate HTML size, confuse readers, and are typically the result of accidental merges or copy-paste errors that should be cleaned up.

Flat output is a single space-separated (or newline-separated with Multiline on) class string, ready to paste directly into a className prop in JSX or a class attribute in HTML. It is the format Tailwind expects. Grouped output displays each category as a labeled block so you can see at a glance which groups your component uses and how many classes are in each — useful for documentation, code comments, design system libraries, and code reviews where human readability matters more than direct usability.

Yes. Responsive prefixes (sm:, md:, lg:, xl:, 2xl:) and state variants (hover:, focus:, active:, disabled:, dark:, group-hover:, peer-focus:) are fully supported. The formatter strips the prefix when determining the category — a hover:bg-blue-600 class is categorized as Background — and preserves the full prefixed class name in the output. Variants are sorted within their category group alongside their non-prefixed counterparts.

This tool uses the same 13-category grouping convention and similar sort order as the official prettier-plugin-tailwindcss package. The key difference is that this runs entirely in your browser — no Node.js, no npm install, no configuration file, and no Prettier setup required. You can use it on any machine, in any project, without touching your toolchain. For automated sorting on save inside an IDE, the Prettier plugin is the right choice; for one-off cleanup, quick audits, or use outside a configured project, this browser tool is faster.

Multiline output places each class on its own line. This is not directly pasteable into a standard single-line className string, but it is useful for several purposes: generating clean line-by-line diffs in version control, creating readable code comment documentation, pasting into tools that accept multiline class lists, or using with template literal class composition patterns like clsx or cn() where each line becomes a separate array entry. Toggle Multiline on when you need per-class granularity rather than a compact string.

The formatter works with any Tailwind class string — it uses pattern matching against known utility prefixes and names rather than parsing a Tailwind configuration file. This means it handles classes from Tailwind v2, v3, and the new v4 utility set. Custom classes that do not match any known pattern are placed in an Other category rather than being dropped or causing an error. The formatter never fails on unknown input — it always produces a sorted, deduplicated output regardless of what is in the class string.

There is no hard limit imposed by the tool — it is bounded only by your browser's available memory, which is generous even for very large class strings. In practice, the formatter handles class strings from single utility components up to large generated class sets with hundreds of entries instantly. Parsing and sorting are synchronous and complete in milliseconds for any realistic class string.

No. All processing runs entirely in your browser using JavaScript. Your class strings are never transmitted over the network, never stored on any server, and never logged. This makes the tool safe to use with internal component code, proprietary design systems, and client work you would prefer not to share with a third-party service.