What does "p-4 covered by px-4" mean?

`p-4` sets the [[padding||inner spacing inside an element]] on every side (left, right, top, bottom). `px-4` sets only left+right, `py-4` only top+bottom. **If you have both**, `p-4` sets 4 everywhere, then `px-4` overrides left/right. It can be intentional (`p-4 px-8` gives more horizontal padding) but it is usually forgetfulness.

Why are classes sorted in a specific order?

Tailwind community convention (and prettier-plugin-tailwindcss): **layout → positioning → display → sizing → spacing → typography → background → border → effects → transitions → states**. It makes **visual scanning easy**: looking for "what layout?" - always first. "What background?" - somewhere in the middle. Without a convention everyone writes classes in the order they added them and every component looks different.

Are arbitrary values [...] supported?

Yes, but **cautiously**. `p-[3px]` is treated as `p-` (so it conflicts with `p-4`, last wins). But `bg-[url(/img.png)]` is treated as separate from `bg-red-500` (different properties - one background-image, one background-color). **Edge case**: `[--my-var]` (custom property) is left alone.

What about states like hover: and focus:?

Each state has its **own independent group**. `hover:bg-red` and `bg-blue` are **two different styles** - one in `:hover`, one always. Conflicts arise **only between classes with the same modifier**: `hover:bg-red` vs `hover:bg-blue` (last wins), `md:p-4` vs `md:p-8` (last wins). The tool detects all of this.

What is a "dead state"?

When a state class has **the same value as the base**: e.g. `bg-white dark:bg-white` - the color does not change in dark mode, so `dark:bg-white` is **pointless**. Or `text-red-500 hover:text-red-500` - hover changes nothing. The tool flags this as a **soft warning** (it does not auto-remove, because the intent is sometimes to "disable" hover, although usually there is a better way).

Can I paste a whole JSX component?

Better paste just the **contents of className**. With or without the quote marks. If you paste the whole component, the tool may not extract the string correctly. **Recommended**: in VS Code click inside the string and use "Select inside quotes" (Ctrl+Shift+\\ or an extension).

What about prefixes like tw-?

If you use a prefix (`tw-p-4`, `tw-bg-red`), the tool treats it as part of the class prefix. **It should work**, but conflict detection may be less precise for non-standard prefixes. For default Tailwind without a prefix it works perfectly.

Why is the result one long line?

Because `className` is a **string**, and a JSX string belongs on one line. If you want **multi-line**, use a template literal or a library like `clsx` / `cn`. Example: `className={cn("flex p-4", "text-sm", isActive && "bg-blue")}`. The tool returns a single string - if you want formatting, add `clsx` yourself.

Is this the same as tailwind-merge?

Similar, but a **different use case**. `tailwind-merge` is a **runtime library** you use in components: `twMerge("p-4", maybeP6)` - resolves conflicts in code (e.g. a user can override a class). We do it **statically**: paste once, get a cleaned result. For runtime, stick with tailwind-merge. For **one-off cleanup**, use this tool.

Tailwind Class Cleaner - free

Why clean up a Tailwind class list?

After a few iterations your `className` looks like this: `"flex p-4 hover:bg-blue-500 px-4 text-sm hover:bg-blue-600 md:p-6 md:p-8 font-medium bg-white"`. Three problems hide in there: `p-4` is partially overridden by `px-4` (redundant), two `hover:bg-blue-...` (hover conflict), `md:p-6` overridden by `md:p-8` (breakpoint conflict). And it is all jumbled up.

The tool detects conflicts ("p-4 overridden by p-2", "md:p-4 vs md:p-8") and redundancies (`p-4` + `px-4` is wasteful). Then it sorts the survivors in the conventional order: layout → positioning → sizing → spacing → typography → background → border → effects → states.

The result is readable and bug-free. You see what got removed, how many groups got sorted, and a stats summary.

How to use

Paste a long className string (from a React/Vue/HTML component) into the left panel.
On the right you get the cleaned version plus a list of detected issues.
Each issue has a description ("p-4 overridden by p-2") - easy to understand why the class disappeared.
Toggle "Sort only" for safe mode - the tool drops nothing, just reorders (useful if you do not trust the conflict detection).
Hit "Copy" and paste the result back into your JSX.

When this helps

Common situations:

Long-running components. A product card after 10 design iterations has 30 classes - most of them useless. After cleanup you keep 12.
Cleaning up designer-generated classes. A Figma-to-Tailwind plugin spits out bloated strings - run them through.
Code review. The comment "classes are messy" - run the file through the tool, get consistent styling. Pairs nicely with prettier-plugin-tailwindcss, but here you also get conflict detection.
Migrating to a new Tailwind version. v4 changes how some classes behave - it is easy to see what survives.
Team onboarding. A junior writes `p-4 px-4 py-4` thinking it is "extra safe" - the tool explains that `p-4` already means `px-4 py-4`.
Cleaning up AI-generated code. AI loves to spit out bloated className strings. Filter them.
Side-by-side with the palette generator - for color choices see the Tailwind palette generator.

For specificity calculations see the specificity calculator. For CSS gradients see the gradient generator.

Frequently asked

It parses each class into prefix-base-modifier. For example `md:hover:p-4` becomes: modifiers `["md", "hover"]`, prefix `p`, value `4`. Two classes with the same modifiers and the same property prefix (`p-`) conflict. The last one wins (Tailwind appends classes in CSS source order, the last one has priority).

Why clean up a Tailwind class list?

The result is readable and bug-free. You see what got removed, how many groups got sorted, and a stats summary.

How to use

Paste a long className string (from a React/Vue/HTML component) into the left panel.

On the right you get the cleaned version plus a list of detected issues.

Each issue has a description ("p-4 overridden by p-2") - easy to understand why the class disappeared.

Toggle "Sort only" for safe mode - the tool drops nothing, just reorders (useful if you do not trust the conflict detection).

Hit "Copy" and paste the result back into your JSX.

When this helps

Common situations:

Long-running components. A product card after 10 design iterations has 30 classes - most of them useless. After cleanup you keep 12.
Cleaning up designer-generated classes. A Figma-to-Tailwind plugin spits out bloated strings - run them through.
Code review. The comment "classes are messy" - run the file through the tool, get consistent styling. Pairs nicely with prettier-plugin-tailwindcss, but here you also get conflict detection.
Migrating to a new Tailwind version. v4 changes how some classes behave - it is easy to see what survives.
Team onboarding. A junior writes `p-4 px-4 py-4` thinking it is "extra safe" - the tool explains that `p-4` already means `px-4 py-4`.
Cleaning up AI-generated code. AI loves to spit out bloated className strings. Filter them.
Side-by-side with the palette generator - for color choices see the Tailwind palette generator.

For specificity calculations see the specificity calculator. For CSS gradients see the gradient generator.

Frequently asked

Tailwind Class Cleaner