diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 3f95c9fafcb1..ef693f491560 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -8282,5 +8282,19 @@ exports[`getVariants 1`] = ` "selectors": [Function], "values": [], }, + { + "hasDash": true, + "isArbitrary": false, + "name": "noscript", + "selectors": [Function], + "values": [], + }, + { + "hasDash": true, + "isArbitrary": false, + "name": "scripting", + "selectors": [Function], + "values": [], + }, ] `; diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index e70970a92bed..acdb71f6efdf 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -1936,6 +1936,26 @@ test('forced-colors', async () => { expect(await run(['forced-colors/foo:flex'])).toEqual('') }) +test('noscript', () => { + expect(run(['noscript:flex'])).toMatchInlineSnapshot(` + "@media (scripting: none) { + .noscript\\:flex { + display: flex; + } + }" + `) +}) + +test('scripting', () => { + expect(run(['scripting:flex'])).toMatchInlineSnapshot(` + "@media (scripting: enabled) { + .scripting\\:flex { + display: flex; + } + }" + `) +}) + test('nth', async () => { expect( await run([ diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index d7a1ab5b1390..46d47080ae6e 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -1134,6 +1134,9 @@ export function createVariants(theme: Theme): Variants { staticVariant('forced-colors', ['@media (forced-colors: active)']) + staticVariant('noscript', ['@media (scripting: none)']) + staticVariant('scripting', ['@media (scripting: enabled)']) + return variants }