diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index d595e8c01..0014ea350 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -12520,6 +12520,12 @@ exports[`getVariants 1`] = ` "any-pointer-none", "any-pointer-coarse", "any-pointer-fine", + "standalone", + "minimal-ui", + "browser", + "fullscreen", + "picture-in-picture", + "window-controls-overlay", "noscript", ], }, @@ -13298,6 +13304,48 @@ 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, + "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 37f9ebbea..9c930c62e 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -2404,6 +2404,78 @@ test('any-pointer-fine', async () => { `) }) +test('standalone', async () => { + expect(await run(['standalone:flex'])).toMatchInlineSnapshot(` + " + @media (display-mode: standalone) { + .standalone\\:flex { + display: flex; + } + } + " + `) +}) + +test('minimal-ui', async () => { + expect(await run(['minimal-ui:flex'])).toMatchInlineSnapshot(` + " + @media (display-mode: minimal-ui) { + .minimal-ui\\:flex { + display: flex; + } + } + " + `) +}) + +test('browser', async () => { + expect(await run(['browser:flex'])).toMatchInlineSnapshot(` + " + @media (display-mode: browser) { + .browser\\:flex { + display: flex; + } + } + " + `) +}) + +test('fullscreen', async () => { + expect(await run(['fullscreen:flex'])).toMatchInlineSnapshot(` + " + @media (display-mode: fullscreen) { + .fullscreen\\:flex { + display: flex; + } + } + " + `) +}) + +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 d2695b4d2..cb0a1c658 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -1244,6 +1244,13 @@ 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('picture-in-picture', ['@media (display-mode: picture-in-picture)']) + staticVariant('window-controls-overlay', ['@media (display-mode: window-controls-overlay)']) + staticVariant('noscript', ['@media (scripting: none)']) return variants