From 7319b7ec50cbb0ea435ab7898af2684f6237084c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= Date: Thu, 4 Jun 2026 11:16:01 -0400 Subject: [PATCH 1/3] Add display-mode variants --- .../__snapshots__/intellisense.test.ts.snap | 32 +++++++++++++ packages/tailwindcss/src/variants.test.ts | 48 +++++++++++++++++++ packages/tailwindcss/src/variants.ts | 5 ++ 3 files changed, 85 insertions(+) diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index a58af944537d..9a9f66ce5f07 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -12355,6 +12355,10 @@ exports[`getVariants 1`] = ` "any-pointer-none", "any-pointer-coarse", "any-pointer-fine", + "standalone", + "minimal-ui", + "browser", + "fullscreen", "noscript", ], }, @@ -13133,6 +13137,34 @@ exports[`getVariants 1`] = ` "selectors": [Function], "values": [], }, + { + "hasDash": true, + "isArbitrary": false, + "name": "standalone", + "selectors": [Function], + "values": [], + }, + { + "hasDash": true, + "isArbitrary": false, + "name": "minimal-ui", + "selectors": [Function], + "values": [], + }, + { + "hasDash": true, + "isArbitrary": false, + "name": "browser", + "selectors": [Function], + "values": [], + }, + { + "hasDash": true, + "isArbitrary": false, + "name": "fullscreen", + "selectors": [Function], + "values": [], + }, { "hasDash": true, "isArbitrary": false, diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index 305859d5b443..3d748a073a09 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -2249,6 +2249,54 @@ test('any-pointer-fine', async () => { `) }) +test('standalone', async () => { + expect(await run(['standalone:flex'])).toMatchInlineSnapshot(` + " + @media (any-pointer: fine) { + .standalone\\:flex { + display: flex; + } + } + " + `) +}) + +test('minimal-ui', async () => { + expect(await run(['minimal-ui:flex'])).toMatchInlineSnapshot(` + " + @media (any-pointer: fine) { + .minimal-ui\\:flex { + display: flex; + } + } + " + `) +}) + +test('browser', async () => { + expect(await run(['browser:flex'])).toMatchInlineSnapshot(` + " + @media (any-pointer: fine) { + .browser\\:flex { + display: flex; + } + } + " + `) +}) + +test('fullscreen', async () => { + expect(await run(['fullscreen:flex'])).toMatchInlineSnapshot(` + " + @media (any-pointer: fine) { + .fullscreen\\:flex { + display: flex; + } + } + " + `) +}) + test('scripting-none', async () => { expect(await run(['noscript:flex'])).toMatchInlineSnapshot(` " diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 4d4637d8f55d..6fdb7079f61a 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -1206,6 +1206,11 @@ export function createVariants(theme: Theme): Variants { staticVariant('any-pointer-coarse', ['@media (any-pointer: coarse)']) staticVariant('any-pointer-fine', ['@media (any-pointer: fine)']) + staticVariant('standalone', ['@media (display-mode: standalone)']) + staticVariant('minimal-ui', ['@media (display-mode: minimal-ui)']) + staticVariant('browser', ['@media (display-mode: browser)']) + staticVariant('fullscreen', ['@media (display-mode: fullscreen)']) + staticVariant('noscript', ['@media (scripting: none)']) return variants From 75ba05f4eae0c388cbb2568c443add004fa573a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= Date: Thu, 4 Jun 2026 11:29:33 -0400 Subject: [PATCH 2/3] Fix display-mode tests --- packages/tailwindcss/src/variants.test.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index 3d748a073a09..db9f40fb6a19 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -2252,7 +2252,7 @@ test('any-pointer-fine', async () => { test('standalone', async () => { expect(await run(['standalone:flex'])).toMatchInlineSnapshot(` " - @media (any-pointer: fine) { + @media (display-mode: standalone) { .standalone\\:flex { display: flex; } @@ -2264,7 +2264,7 @@ test('standalone', async () => { test('minimal-ui', async () => { expect(await run(['minimal-ui:flex'])).toMatchInlineSnapshot(` " - @media (any-pointer: fine) { + @media (display-mode: minimal-ui) { .minimal-ui\\:flex { display: flex; } @@ -2276,7 +2276,7 @@ test('minimal-ui', async () => { test('browser', async () => { expect(await run(['browser:flex'])).toMatchInlineSnapshot(` " - @media (any-pointer: fine) { + @media (display-mode: browser) { .browser\\:flex { display: flex; } @@ -2288,7 +2288,7 @@ test('browser', async () => { test('fullscreen', async () => { expect(await run(['fullscreen:flex'])).toMatchInlineSnapshot(` " - @media (any-pointer: fine) { + @media (display-mode: fullscreen) { .fullscreen\\:flex { display: flex; } From 47dfc38ad55e0e6dce3699d66d77d120a98d7d99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= Date: Thu, 4 Jun 2026 11:50:10 -0400 Subject: [PATCH 3/3] Add newer spec values --- .../__snapshots__/intellisense.test.ts.snap | 16 +++++++++++++ packages/tailwindcss/src/variants.test.ts | 24 +++++++++++++++++++ packages/tailwindcss/src/variants.ts | 2 ++ 3 files changed, 42 insertions(+) diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 9a9f66ce5f07..9a5fc32b1de6 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -12359,6 +12359,8 @@ exports[`getVariants 1`] = ` "minimal-ui", "browser", "fullscreen", + "picture-in-picture", + "window-controls-overlay", "noscript", ], }, @@ -13165,6 +13167,20 @@ exports[`getVariants 1`] = ` "selectors": [Function], "values": [], }, + { + "hasDash": true, + "isArbitrary": false, + "name": "picture-in-picture", + "selectors": [Function], + "values": [], + }, + { + "hasDash": true, + "isArbitrary": false, + "name": "window-controls-overlay", + "selectors": [Function], + "values": [], + }, { "hasDash": true, "isArbitrary": false, diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index db9f40fb6a19..2908a0e8fa6d 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -2297,6 +2297,30 @@ test('fullscreen', async () => { `) }) +test('picture-in-picture', async () => { + expect(await run(['picture-in-picture:flex'])).toMatchInlineSnapshot(` + " + @media (display-mode: picture-in-picture) { + .picture-in-picture\\:flex { + display: flex; + } + } + " + `) +}) + +test('window-controls-overlay', async () => { + expect(await run(['window-controls-overlay:flex'])).toMatchInlineSnapshot(` + " + @media (display-mode: window-controls-overlay) { + .window-controls-overlay\\:flex { + display: flex; + } + } + " + `) +}) + test('scripting-none', async () => { expect(await run(['noscript:flex'])).toMatchInlineSnapshot(` " diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 6fdb7079f61a..4df497d0bf63 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -1210,6 +1210,8 @@ export function createVariants(theme: Theme): Variants { staticVariant('minimal-ui', ['@media (display-mode: minimal-ui)']) staticVariant('browser', ['@media (display-mode: browser)']) staticVariant('fullscreen', ['@media (display-mode: fullscreen)']) + staticVariant('picture-in-picture', ['@media (display-mode: picture-in-picture)']) + staticVariant('window-controls-overlay', ['@media (display-mode: window-controls-overlay)']) staticVariant('noscript', ['@media (scripting: none)'])