---
title: "@variant"
description: "Apply variants, such as hover or dark, to a block of declarations in a rule of your stylesheet."
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.

# @variant

```css
selector {
  @variant variant:sequence, alternative {
    declarations
  }
}
```

`@variant` wraps its block in the rules of the listed variants. Write it inside
a style rule.

## Example

### Stylesheet

```css
.card {
  background-color: white;

  @variant hover, focus-within {
    background-color: var(--color-gray-50);
  }

  @variant dark:hover {
    background-color: var(--color-gray-800);
  }
}
```

### Generated stylesheet without preflight

```css
/*! stillwind v0.0.0 | MIT License | https://stillwind.dev */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties, theme, base, components, utilities;

@layer theme {
  :root, :host {
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-800: oklch(27.8% .033 256.848);
  }
}

.card {
  background-color: #fff;

  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }

  &:focus-within {
    background-color: var(--color-gray-50);
  }

  @media (prefers-color-scheme: dark) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-800);
      }
    }
  }
}
```

## Rules

- Each comma-separated sequence receives its own copy of the block.
- In a sequence, the leftmost variant is the outermost one. `dark:hover` puts
  the `dark` media query around the `:hover` rule.
- A sequence that does not resolve contributes nothing.
  `@variant nope, print { ... }` keeps only the `print` copy.
- Nested blocks expand inside the rules of the enclosing sequences.
- A `@variant` statement without a block stays in the output unchanged.

[prefer-variant-directive](/docs/lints/prefer-variant-directive) reports an
`@media` query that a variant of your theme can replace, such as a breakpoint.

## Variant definitions

At the top level of the stylesheet, a `@variant` block that contains `@slot`
defines a variant, for compatibility with older Tailwind CSS stylesheets. Use
[@custom-variant](/docs/at-rules/custom-variant) for new definitions.

Source: https://stillwind.dev/docs/at-rules/variant/index.mdx