You Might Also Like
Tailwind Class Sorter — Sort & Group Tailwind CSS Classes Online
About this tool
What Is This Tailwind CSS Formatter?
This is a free, browser-based Tailwind CSS class sorter and formatter that takes any string of utility classes — no matter how disordered, duplicated, or mixed with responsive and state variants — and produces a clean, consistently ordered result. It follows the same 13-category grouping convention used by the official Prettier Tailwind CSS plugin: Layout, Flexbox & Grid, Spacing, Sizing, Typography, Background, Border, Effects, Transitions, Transforms, Interactivity, SVG, and Accessibility. Output is available in two formats — a flat single-line string ready to drop directly into a className or class attribute, and a grouped view that separates classes into labeled category blocks for documentation and readability. Everything runs entirely in your browser — no server, no npm install, no configuration.
The core problem this tool solves is class string entropy. Tailwind's utility-first approach is powerful, but it produces long class strings that grow organically as components evolve. A button that starts as flex items-center gains hover states, responsive variants, dark mode overrides, and focus ring classes over dozens of iterations — each added wherever the developer thought to put it at the time. The result is a class string where p-4 sits next to hover:bg-blue-600 sits next to rounded-lg sits next to text-white, with no structural logic. That string is correct — Tailwind compiles all of it — but it is practically unreadable during a code review and nearly impossible to audit for conflicts or redundancy.
Sorting by category solves this immediately. When all spacing classes appear together, all typography classes appear together, and all variant-prefixed classes appear consistently within their groups, the structure of the component's visual logic becomes transparent at a glance. A reviewer can scan down the sorted list and immediately see: this element is absolutely positioned, it uses 4 spacing tokens, it has custom text color, it has a ring on focus, and it has three responsive overrides. That is much harder to extract from an unsorted string of 25 mixed classes.
The deduplication pass removes a second class of Tailwind bug: accidentally repeated classes. It is surprisingly easy to end up with p-4 p-4 or text-white text-white in a class string, especially when merging changes or composing classes dynamically with template literals. Tailwind compiles them to the same CSS, so the behavior is correct — but the extra classes inflate the HTML size and make the code harder to read. This formatter removes all duplicates and reports them in the stats bar so you can see exactly what was cleaned up.
Features
- Sorts Tailwind utility classes into 13 logical categories: Layout, Flexbox & Grid, Spacing, Sizing, Typography, Background, Border, Effects, Transitions, Transforms, Interactivity, SVG, Accessibility
- Deduplicates repeated classes — reports the count of removed duplicates in the stats bar
- Flat output mode — single sorted class string ready for direct use in className or class attributes
- Grouped output mode — categories displayed as labeled blocks for documentation and readability
- Stats bar — shows total class count, unique count, duplicate count, and number of active groups
- Multiline output option — each class on its own line for cleaner diffs in version control
- Responsive and state variant support — sm:, md:, lg:, hover:, focus:, dark:, active: all preserved and sorted correctly
- Sort and Group toggles — enable or disable sorting and grouping independently
- Sample button — loads a representative class string to explore all formatter features instantly
- One-click Copy — copies the full formatted output to clipboard with a confirmation toast
- 100% client-side — no data sent to any server, no sign-up, no watermark, no character limit
How to Use
Paste any string of Tailwind CSS utility classes into the input panel on the left. The classes can be in any order, include duplicates, mix responsive prefixes like sm: and lg:, and include state variants like hover:, focus:, dark:, and active:. The formatter accepts a single-line string, multiline class lists, or anything in between — it splits on spaces, newlines, and commas.
The output appears immediately in the right panel as you type. Four options in the toolbar control the processing behavior. Dedup removes duplicate class entries and reports the count in the stats bar — enable this to catch accidentally repeated classes from copy-paste or dynamic class composition. Sort applies alphabetical ordering within each category group, making it easier to scan for conflicts between similar utilities. Group separates the output into labeled category blocks following the Prettier Tailwind plugin ordering convention. Multiline puts each class on its own line instead of space-separating them — useful when you want clean, line-by-line diffs in version control or pull requests.
Switch between the Flat and Grouped output tabs using the buttons above the right panel. Flat output is a single compact string — paste it directly into a className prop in JSX or a class attribute in HTML. Grouped output shows each category as a labeled block with the classes inside — useful for code documentation, style guides, or design system component libraries where you want the visual structure of the element to be immediately readable without running the code.
The stats bar below the toolbar shows four numbers: Total (all input classes including duplicates), Unique (classes after dedup), Dupes (count of removed duplicates, highlighted red when non-zero), and Groups (how many categories received at least one class). This gives you an at-a-glance audit of how complex and how clean the class string is.
Click Sample to load a representative set of Tailwind classes that exercises all 13 category groups, several responsive variants, and intentional duplicates — a good way to explore all output modes before pasting your own code. Click Copy when you are done to copy the formatted string to your clipboard. A brief toast confirmation confirms the copy succeeded.
For JSX components with long className strings — paste the full string in, toggle Dedup and Sort on, check the flat output, and paste it back. For design system documentation — enable Group and Multiline, then paste the grouped output as a code comment above the component explaining its visual structure. For code reviews — paste the class string from the PR diff, enable Dedup, and check whether the stats bar shows any duplicates before approving the change.
Common Use Cases
Frequently Asked Questions
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.