prefer-typed-relationships

This rule reports group-* and peer-* variants. They connect elements through the class names group and peer, so any element with the same class can match, and nothing checks a misspelled name. A ref connects the elements through a variable instead. The stylistic preset enables this rule.

Reported

style("group-hover:text-red-500");prefer-typed-relationships: Tailwind relationship utility `group-hover:text-red-500` is forbidden; use style.ref() and specify shared scopes with in()

Fixed

const card = style.ref("card");
const container = style(card);
const title = style({ [card("hover")]: "text-red-500" });

How to fix

• Replace group with a ref on the parent, and group-hover: with a condition on that ref, as in the example.
• Replace peer with a ref on the sibling, and use .in() with a ref on a shared ancestor.

See Element relationships.

Rule settings