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

Author: RobinMalfait

src/docs/adding-custom-styles.mdx

@@ -328,7 +328,7 @@ Use the `@variant` directive to apply a Tailwind variant within custom CSS:
 
 </CodeExampleStack>
 
-If you need to apply multiple variants at the same time, use nesting:
+If you need to apply multiple variants at the same time, stack them using the same syntax you would in HTML:
 
 <CodeExampleStack>
 
@@ -337,11 +337,9 @@ If you need to apply multiple variants at the same time, use nesting:
 .my-element {
   background: white;
 
-  /* [!code highlight:6] */
-  @variant dark {
-    @variant hover {
-      background: black;
-    }
+  /* [!code highlight:4] */
+  @variant hover:focus {
+    background: black;
   }
 }
 ```
@@ -351,10 +349,10 @@ If you need to apply multiple variants at the same time, use nesting:
 .my-element {
   background: white;
 
-  /* [!code highlight:7] */
-  @media (prefers-color-scheme: dark) {
-    &:hover {
-      @media (hover: hover) {
+  /* [!code highlight:8] */
+  &:hover {
+    @media (hover: hover) {
+      &:focus {
         background: black;
       }
     }
@@ -364,6 +362,42 @@ If you need to apply multiple variants at the same time, use nesting:
 
 </CodeExampleStack>
 
+To apply the same styles for multiple variants, separate each variant with a comma:
+
+<CodeExampleStack>
+
+```css
+/* [!code filename:app.css] */
+.my-element {
+  background: white;
+
+  /* [!code highlight:4] */
+  @variant hover, focus {
+    background: black;
+  }
+}
+```
+
+```css
+/* [!code filename:Compiled CSS] */
+.my-element {
+  background: white;
+
+  /* [!code highlight:10] */
+  &:hover {
+    @media (hover: hover) {
+      background: black;
+    }
+  }
+
+  &:focus {
+    background: black;
+  }
+}
+```
+
+</CodeExampleStack>
+
 ## Adding custom utilities
 
 ### Simple utilities

src/docs/functions-and-directives.mdx

@@ -93,6 +93,8 @@ Use the `@variant` directive to apply a Tailwind variant to styles in your CSS:
 }
 ```
 
+You can also stack variants like `@variant hover:focus { … }`, or apply the same styles to multiple variants with `@variant hover, focus { … }`.
+
 Learn more using variants in the [using variants documentation](/docs/adding-custom-styles#using-variants).
 
 <h3 id="custom-variant-directive">