---
title: "invalid-marker-use"
description: "Reports a marker class such as group with a variant or the important modifier."
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.

# invalid-marker-use

This rule reports a marker class, such as `group` or `peer`, with a variant or
the `!` modifier. A marker only names an element for other selectors and has no
CSS of its own, so a variant cannot turn it on or off.

## Reported

```tsx
style("hover:group");
```

> invalid-marker-use: `hover:group` cannot add the marker class `group` under variants or ref conditions
> 
> Example:1:8

## Fixed

```tsx
const parent = style("group");
const child = style("group-hover:underline");
```

## How to fix

- Add the marker without a variant, and put the condition on the utilities of the
  element that reacts, such as `group-hover:underline`.
- To connect elements with names that TypeScript checks, use
  [style.ref()](/docs/macros/ref) instead of `group` and `peer`.

## Options

`ignoredClasses` lists marker class names that the rule does not check. Each name
must match exactly.

## Rule settings

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

| Option | Default |
| --- | --- |
| `ignoredClasses` | `[]` |

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

Source: https://stillwind.dev/docs/lints/invalid-marker-use/index.mdx