Skip to content

@variant

Apply variants, such as hover or dark, to a block of declarations in a rule of your stylesheet.

View as Markdown 
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

.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

/*! 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 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 for new definitions.