Tailwind class conflicts

← All tools

Paste a class string. Utilities that target the same CSS property (per variant) are grouped; the last one in the list wins in this approximation — same idea as tailwind-merge. Your classes never leave the browser.

Rule-based approximation — not a full Tailwind compiler. Real cascade order comes from generated CSS, not HTML class order. Always verify in DevTools when unsure.

~~~
Examples

No conflicts detected in the supported property map.

Conflicts ()

Suggested (conflicts removed)

~~~
About this tool
How winners are chosen— Within the same variant prefix (e.g. both md:), utilities mapped to the same CSS property compete. The last one in your class string wins; ! important beats non-important. This mirrors common merge helpers, not the real stylesheet sort order.
Supported subset— Spacing, sizing, display, position, flex/grid alignment, typography size/weight/align, background/text/border colors, radius, overflow, opacity, shadows, transforms, transitions. Arbitrary values and plugin utilities are left untouched.
Limits— Does not parse Tailwind config, @layer order, or CSS modules. Side-specific padding/margin are separate groups (p-4 vspx-2 can both apply). Prefer one intent per property.
~~~
Read more