Document new @variant behavior where you can stack & compounds variants (#2481)

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):

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

Which compiles to:
```css
.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:

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

Which compiles to:
```css
.my-element {
  background: white;
  &:hover {
    @media (hover: hover) {
      background: black;
    }
  }

  &:focus {
    background: black;
  }
}
```

<img width="709" height="1251" alt="image"
src="https://github.com/user-attachments/assets/46089844-06c9-4640-ab3b-a05d69bea8f9"
/>

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,43 @@ 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:6] */
+  &:hover {
+    @media (hover: hover) {
+      background: black;
+    }
+  }
+
+  /* [!code highlight:4] */
+  &:focus {
+    background: black;
+  }
+}
+```
+
+</CodeExampleStack>
+
 ## Adding custom utilities
 
 ### Simple utilities