Add display-mode variants

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,

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

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