invalid-rule-group-input

This rule reports a class field, a custom property, a ref, or a stored style() result inside an object with variant keys, such as { "hover:": ... }. A variant can only condition utilities, so the input is left out.

Reported

.external {
  color: red;
}

style({ "hover:": { class: "external" } });invalid-rule-group-input: style() rule groups cannot contain external class value

Fixed

.external:hover {
  color: red;
}

style({ class: "external" });

How to fix

• If you own the other stylesheet, put the state in its selector and attach the class without a variant, as in the example. The element still turns red only while it is hovered.
• If the stylesheet cannot change and the application already tracks the state in JavaScript, pass the class field under that JavaScript condition.
• If the class only applies styles that Stillwind has as utilities, write those utilities under the variant instead, such as { "hover:": "opacity-50" }.

Rule settings