---
title: "prefer-typed-relationships"
description: "Reports group-* and peer-* variants that a ref can replace."
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.

# 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

```tsx
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()
> 
> Example:1:8

## Fixed

```tsx
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()`](/docs/macros/ref/in) with a ref on a shared ancestor.

See [Element relationships](/docs/guides/element-relationships).

## Rule settings

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

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

Source: https://stillwind.dev/docs/lints/prefer-typed-relationships/index.mdx