---
title: "conflicting-utilities"
description: "Reports utilities that set the same CSS property under the same conditions, such as p-2 p-4."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```tsx
style("p-2 p-4");
```

> conflicting-utilities: utilities `p-2` and `p-4` overlap `padding`
> 
> Example:1:12
> 
> Example:1:8: previous utility

## Fixed

```tsx
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](/docs/guides/style#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

| Preset | Severity |
| --- | --- |
| `recommended` | warn |
| `strict` | deny |
| `stylistic` | off |

| Option | Default |
| --- | --- |
| `allowShorthandOverrides` | `false` |

[Configure lint](/docs/configuration#lint) to change the severity or options.

Source: https://stillwind.dev/docs/lints/conflicting-utilities/index.mdx