Merge 47dfc38ad5 into fa81d697fe

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,

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(`
     "

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