Add inert variant (#14129)

This PR adds a new `inert` variant.

We use `:where([inert], [inert] *)`, because the element with the
`inert` attribute and any of its descendants will be inert.

For example, both these buttons will have `opacity-50`:

```html
<button inert class="inert:opacity-50">I am inert</button>
<div inert>
  <button class="inert:opacity-50">I am also inert</button>
</div>
```

See: https://play.tailwindcss.com/Jqedv6phGn

Author: RobinMalfait

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add support for `inline` option when defining `@theme` values ([#14095](https://github.com/tailwindlabs/tailwindcss/pull/14095))
+- Add `inert` variant ([#14129](https://github.com/tailwindlabs/tailwindcss/pull/14129))
 
 ## [4.0.0-alpha.18] - 2024-07-25
 

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -1942,6 +1942,7 @@ exports[`getVariants 1`] = `
       "active",
       "enabled",
       "disabled",
+      "inert",
       "has",
       "aria",
       "data",
@@ -1993,6 +1994,7 @@ exports[`getVariants 1`] = `
       "active",
       "enabled",
       "disabled",
+      "inert",
       "has",
       "aria",
       "data",
@@ -2284,6 +2286,13 @@ exports[`getVariants 1`] = `
     "selectors": [Function],
     "values": [],
   },
+  {
+    "hasDash": true,
+    "isArbitrary": false,
+    "name": "inert",
+    "selectors": [Function],
+    "values": [],
+  },
   {
     "hasDash": true,
     "isArbitrary": true,
@@ -2324,6 +2333,7 @@ exports[`getVariants 1`] = `
       "active",
       "enabled",
       "disabled",
+      "inert",
       "has",
       "aria",
       "data",

packages/tailwindcss/src/variants.test.ts

@@ -695,6 +695,23 @@ test('disabled', () => {
   expect(run(['disabled/foo:flex'])).toEqual('')
 })
 
+test('inert', () => {
+  expect(run(['inert:flex', 'group-inert:flex', 'peer-inert:flex'])).toMatchInlineSnapshot(`
+    ".group-inert\\:flex:is(:where(.group):is([inert], [inert] *) *) {
+      display: flex;
+    }
+
+    .peer-inert\\:flex:is(:where(.peer):is([inert], [inert] *) ~ *) {
+      display: flex;
+    }
+
+    .inert\\:flex:is([inert], [inert] *) {
+      display: flex;
+    }"
+  `)
+  expect(run(['inert/foo:flex'])).toEqual('')
+})
+
 test('group-[...]', () => {
   expect(
     run([

packages/tailwindcss/src/variants.ts

@@ -465,6 +465,8 @@ export function createVariants(theme: Theme): Variants {
     staticVariant(key, [value])
   }
 
+  staticVariant('inert', ['&:is([inert], [inert] *)'])
+
   variants.compound('has', (ruleNode, variant) => {
     if (variant.modifier) return null