---
title: "prefer-variant-directive"
description: "Reports a condition in your stylesheet that a named variant 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-variant-directive

This rule reports a condition in a rule of your stylesheet, such as an `@media`
query, that a variant of your theme expresses with the same meaning. The named
variant keeps the stylesheet in sync when the theme changes the breakpoint. The
`stylistic` preset enables this rule.

## Reported

```css
.card {
  @media (width >= 48rem) {
    display: flex;
  }
}
```

> prefer-variant-directive: `@media (width >= 48rem)` applies the same condition as variant `md`; write `@variant md`
> 
> Example:2:3

## Fixed

```css
.card {
  @variant md {
    display: flex;
  }
}
```

## How to fix

Replace the condition with `@variant` and the name of the variant, as in the
example. The automatic fix applies it.

## Options

`pxToRem` treats `px` and `rem` in media queries as equal at 16px per `rem`. With
it, `@media (width >= 768px)` also matches `md`.

## Rule settings

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

| Option | Default |
| --- | --- |
| `pxToRem` | `false` |

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

Source: https://stillwind.dev/docs/lints/prefer-variant-directive/index.mdx