Document new @variant behavior where you can stack & compounds variants

[RobinMalfait]

Direct link: https://tailwindcss-com-git-feat-document-compound-9d8eca-tailwindlabs.vercel.app/docs/adding-custom-styles#using-variants

This PR documents the new @variant behavior that was introduced in tailwindlabs/tailwindcss#19996 where you can stack variants (like you would in normal HTML):

.my-element {
  background: white;
  @variant hover:focus {
    background: black;
  }
}

Which compiles to:

.my-element {
  background: white;

  &:hover {
    @media (hover: hover) {
      &:focus {
        background: black;
      }
    }
  }
}

Similarly, this adds docs for compound variants, where you can define the same CSS in different situations:

.my-element {
  background: white;
  @variant hover, focus {
    background: black;
  }
}

Which compiles to:

.my-element {
  background: white;
  &:hover {
    @media (hover: hover) {
      background: black;
    }
  }

  &:focus {
    background: black;
  }
}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tailwindcss-com	Ready	Preview, Comment	May 8, 2026 2:08pm