Tailwind Class Cleaner
Long class lists get messy. Paste yours to drop duplicates, group related utilities together, and see where two classes fight over the same property.
Your classes
flex flex-col items-center gap-4 p-4 p-6 text-sm font-semibold text-cyan-700 text-gray-900 bg-white border border-gray-200 rounded-lg shadow-md md:flex-row md:p-8 hover:bg-gray-50
p-4
- p-4 p-6 both set padding
- text-gray-900 text-cyan-700 both set text color
Which class wins depends on the order in the generated stylesheet, not on the order you wrote them, so keep only the one you mean.
Frequently asked questions
Does the order of Tailwind classes matter?
Not for the result. Tailwind generates its CSS in its own fixed order, so writing p-4 before or after text-sm changes nothing. Order only matters for readability and for keeping diffs tidy.
What happens when two classes conflict, like p-4 and p-6?
Both are applied, and the one that appears later in Tailwind's generated stylesheet wins, not the one you wrote last. That is why conflicts cause confusing bugs, and why this tool lists them.
How does the sorting work?
Classes are grouped by what they control: layout and position first, then flex and grid, sizing, spacing, typography, colors, borders, effects and transitions. Responsive and state variants such as md: and hover: follow the base classes.
Is this the same as the official Prettier plugin?
No. The prettier-plugin-tailwindcss sorts using Tailwind's own internal order and is the better choice to run automatically in your editor or CI. This tool is a quick cleanup and conflict check you can use without installing anything.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.