Tailwind class conflicts
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.
No conflicts detected in the supported property map.
Conflicts ()
- winner
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 vs px-2 can both apply). Prefer one intent per property.
Read more
Free books, courses, and software
Get my programming books, course editions, and complete software.
Get the download library →