conflicting-utilities

This rule reports two utilities that set the same CSS property under the same conditions. Only one of them takes effect. The order of the generated CSS decides which one, not the order in your code, so the code does not show the result.

Reported

style("p-2 p-4");conflicting-utilities: utilities `p-2` and `p-4` overlap `padding`

Fixed

style("p-4");

How to fix

• Keep the utility that you want, and remove the other.
• If the values belong to different states or widths, add a variant to one of them, such as p-2 md:p-4.
• If one utility overrides a shared style, pass the shared style as a base. See Override a style.

Options

allowShorthandOverrides allows the supported overrides between a shorthand utility and a longhand utility. The rule still reports other conflicts.

Rule settings