tailwind/conflicting-utilities

Why

When p-2 and p-4 sit on one element, the winner is whichever rule comes later in the generated stylesheet, not the one written later in the class attribute. The result looks right by accident, changes when Tailwind reorders its output, and tells the next reader nothing about what was meant.

Fix

Keep one of them. When a component takes extra classes from its caller, give it explicit props for its variants (size="lg") instead of letting callers append overrides, or merge class lists with a helper that resolves conflicts (such as tailwind-merge). Different variants are fine: block md:flex.

Examples

<!-- bad -->
<div class="flex grid gap-2 p-2 p-4">…</div>
<!-- good -->
<div class="grid gap-2 p-4 md:flex">…</div>

Sources

• Tailwind CSS docs, Styling with utility classes (managing style conflicts)

Read it in the terminal

npx github:dawidolko/frontend-skills explain tailwind/conflicting-utilities