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

@media (width >= 40rem) {
  @utility brand {ignored-definition-condition: `@utility` defines at compile time, so the enclosing condition is ignored; put conditions around `@stillwind-slot utilities;` instead
    color: red;
  }
}

Fixed

@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