diff --git a/CHANGELOG.md b/CHANGELOG.md index 0991de2e4..e7929a669 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index bd11e80ee..026f62ecd 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/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", diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index 895d444e4..c4195b3e4 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/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([ diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 4a05b9adc..cef987c95 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/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