tailwind/conflicting-utilities

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

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

Przeczytaj w terminalu

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