---
title: "ignored-definition-condition"
description: "Reports a media rule around a utility definition, which the compiler ignores."
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.

# ignored-definition-condition

This rule reports a `@utility` definition inside a condition such as `@media`.
The compiler registers utilities when it reads the stylesheet, not in the
browser, so it ignores the condition. The utility then applies at every width.

## Reported

```css
@media (width >= 40rem) {
  @utility brand {
    color: red;
  }
}
```

> ignored-definition-condition: `@utility` defines at compile time, so the enclosing condition is ignored; put conditions around `@stillwind-slot utilities;` instead
> 
> Example:2:3

## Fixed

```css
@utility brand {
  @media (width >= 40rem) {
    color: red;
  }
}
```

## How to fix

- Put the condition inside the body of the utility, as in the example. Then the
  generated CSS keeps the condition.
- Or define the utility without a condition, and apply it with a variant, such as
  `md:brand`.

## Rule settings

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

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

Source: https://stillwind.dev/docs/lints/ignored-definition-condition/index.mdx