Repository: tailwindlabs/tailwindcss
Pull request #7924 (2022-03-23 15:09:00)

Add `backdrop` variant
This PR adds a new `backdrop` variant for the [::backdrop pseudo-class](https://developer.mozilla.org/fr/docs/Web/CSS/::backdrop).


Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0c43a94d..6b982cf1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix extraction from template literal/function with array ([#7481](https://github.com/tailwindlabs/tailwindcss/pull/7481))
 - Don't output unparsable arbitrary values ([#7789](https://github.com/tailwindlabs/tailwindcss/pull/7789))
 - Fix generation of `div:not(.foo)` if `.foo` is never defined ([#7815](https://github.com/tailwindlabs/tailwindcss/pull/7815))
+- Allow for custom properties in `rgb`, `rgba`, `hsl` and `hsla` colors ([#7933](https://github.com/tailwindlabs/tailwindcss/pull/7933))
+- Remove autoprefixer as explicit peer-dependency to avoid invalid warnings in situations where it isn't actually needed ([#7949](https://github.com/tailwindlabs/tailwindcss/pull/7949))
 
 ### Changed
 
diff --git a/package-lock.json b/package-lock.json
index 19c81b30..2468ecb7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.7",
+        "postcss": "^8.4.12",
         "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.3",
         "postcss-nested": "5.0.6",
@@ -57,7 +57,6 @@
         "node": ">=12.13.0"
       },
       "peerDependencies": {
-        "autoprefixer": "^10.0.2",
         "postcss": "^8.0.9"
       }
     },
@@ -5182,9 +5181,19 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.7",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.7.tgz",
-      "integrity": "sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A==",
+      "version": "8.4.12",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
+      "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
       "dependencies": {
         "nanoid": "^3.3.1",
         "picocolors": "^1.0.0",
@@ -5192,10 +5201,6 @@
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-calc": {
@@ -10346,9 +10351,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.7",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.7.tgz",
-      "integrity": "sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A==",
+      "version": "8.4.12",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
+      "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
       "requires": {
         "nanoid": "^3.3.1",
         "picocolors": "^1.0.0",
diff --git a/package.json b/package.json
index 219f64d5..f98d861d 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,6 @@
     "source-map-js": "^1.0.2"
   },
   "peerDependencies": {
-    "autoprefixer": "^10.0.2",
     "postcss": "^8.0.9"
   },
   "dependencies": {
@@ -77,7 +76,7 @@
     "normalize-path": "^3.0.0",
     "object-hash": "^3.0.0",
     "picocolors": "^1.0.0",
-    "postcss": "^8.4.7",
+    "postcss": "^8.4.12",
     "postcss-js": "^4.0.0",
     "postcss-load-config": "^3.1.3",
     "postcss-nested": "5.0.6",
diff --git a/src/corePlugins.js b/src/corePlugins.js
index e0a232a4..bfcc21a4 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -26,6 +26,8 @@ export let variantPlugins = {
     addVariant('file', '&::file-selector-button')
 
     addVariant('placeholder', '&::placeholder')
+    
+    addVariant('backdrop', '&::backdrop')
 
     addVariant('before', ({ container }) => {
       container.walkRules((rule) => {
diff --git a/src/util/color.js b/src/util/color.js
index aa21d668..da8ec7bc 100644
--- a/src/util/color.js
+++ b/src/util/color.js
@@ -2,14 +2,16 @@ import namedColors from 'color-name'
 
 let HEX = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i
 let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i
-let VALUE = `(?:\\d+|\\d*\\.\\d+)%?`
-let SEP = `(?:\\s*,\\s*|\\s+)`
-let ALPHA_SEP = `\\s*[,/]\\s*`
+let VALUE = /(?:\d+|\d*\.\d+)%?/
+let SEP = /(?:\s*,\s*|\s+)/
+let ALPHA_SEP = /\s*[,/]\s*/
+let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)\)/
+
 let RGB = new RegExp(
-  `^rgba?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
+  `^rgba?\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
 )
 let HSL = new RegExp(
-  `^hsla?\\(\\s*((?:${VALUE})(?:deg|rad|grad|turn)?)${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
+  `^hsla?\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
 )
 
 export function parseColor(value) {


Test patch:
diff --git a/tests/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js
index fa881ff9..3c3954a3 100644
--- a/tests/color-opacity-modifiers.test.js
+++ b/tests/color-opacity-modifiers.test.js
@@ -178,3 +178,62 @@ test('utilities that support any type are supported', async () => {
     `)
   })
 })
+
+test('opacity modifier in combination with partial custom properties', async () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div class="bg-[hsl(var(--foo),50%,50%)]"></div>
+          <div class="bg-[hsl(123,var(--foo),50%)]"></div>
+          <div class="bg-[hsl(123,50%,var(--foo))]"></div>
+          <div class="bg-[hsl(var(--foo),50%,50%)]/50"></div>
+          <div class="bg-[hsl(123,var(--foo),50%)]/50"></div>
+          <div class="bg-[hsl(123,50%,var(--foo))]/50"></div>
+          <div class="bg-[hsl(var(--foo),var(--bar),var(--baz))]/50"></div>
+        `,
+      },
+    ],
+    corePlugins: { preflight: false },
+    plugins: [],
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .bg-\[hsl\(var\(--foo\)\2c 50\%\2c 50\%\)\] {
+        --tw-bg-opacity: 1;
+        background-color: hsl(var(--foo) 50% 50% / var(--tw-bg-opacity));
+      }
+
+      .bg-\[hsl\(123\2c var\(--foo\)\2c 50\%\)\] {
+        --tw-bg-opacity: 1;
+        background-color: hsl(123 var(--foo) 50% / var(--tw-bg-opacity));
+      }
+
+      .bg-\[hsl\(123\2c 50\%\2c var\(--foo\)\)\] {
+        --tw-bg-opacity: 1;
+        background-color: hsl(123 50% var(--foo) / var(--tw-bg-opacity));
+      }
+
+      .bg-\[hsl\(var\(--foo\)\2c 50\%\2c 50\%\)\]\/50 {
+        background-color: hsl(var(--foo) 50% 50% / 0.5);
+      }
+
+      .bg-\[hsl\(123\2c var\(--foo\)\2c 50\%\)\]\/50 {
+        background-color: hsl(123 var(--foo) 50% / 0.5);
+      }
+
+      .bg-\[hsl\(123\2c 50\%\2c var\(--foo\)\)\]\/50 {
+        background-color: hsl(123 50% var(--foo) / 0.5);
+      }
+
+      .bg-\[hsl\(var\(--foo\)\2c var\(--bar\)\2c var\(--baz\)\)\]\/50 {
+        background-color: hsl(var(--foo) var(--bar) var(--baz) / 0.5);
+      }
+    `)
+  })
+})
diff --git a/tests/color.test.js b/tests/color.test.js
index a01b9d7e..8d4f611c 100644
--- a/tests/color.test.js
+++ b/tests/color.test.js
@@ -2,37 +2,61 @@ import { parseColor, formatColor } from '../src/util/color'
 
 describe('parseColor', () => {
   it.each`
-    color                           | output
-    ${'black'}                      | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: undefined }}
-    ${'#0088cc'}                    | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
-    ${'#08c'}                       | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
-    ${'#0088cc99'}                  | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
-    ${'#08c9'}                      | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
-    ${'rgb(0, 30, 60)'}             | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
-    ${'rgba(0, 30, 60, 0.5)'}       | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
-    ${'rgb(0 30 60)'}               | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
-    ${'rgb(0 30 60 / 0.5)'}         | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
-    ${'hsl(0, 30%, 60%)'}           | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0deg, 30%, 60%)'}        | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0rad, 30%, 60%)'}        | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0grad, 30%, 60%)'}       | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0turn, 30%, 60%)'}       | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: undefined }}
-    ${'hsla(0, 30%, 60%, 0.5)'}     | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
-    ${'hsla(0deg, 30%, 60%, 0.5)'}  | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
-    ${'hsla(0rad, 30%, 60%, 0.5)'}  | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
-    ${'hsla(0grad, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
-    ${'hsla(0turn, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
-    ${'hsl(0 30% 60%)'}             | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0deg 30% 60%)'}          | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0rad 30% 60%)'}          | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0grad 30% 60%)'}         | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0turn 30% 60%)'}         | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0 30% 60% / 0.5)'}       | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
-    ${'hsl(0deg 30% 60% / 0.5)'}    | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
-    ${'hsl(0rad 30% 60% / 0.5)'}    | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
-    ${'hsl(0grad 30% 60% / 0.5)'}   | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
-    ${'hsl(0turn 30% 60% / 0.5)'}   | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
-    ${'transparent'}                | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: '0' }}
+    color                                        | output
+    ${'black'}                                   | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: undefined }}
+    ${'#0088cc'}                                 | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
+    ${'#08c'}                                    | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
+    ${'#0088cc99'}                               | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
+    ${'#08c9'}                                   | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
+    ${'rgb(0, 30, 60)'}                          | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
+    ${'rgba(0, 30, 60, 0.5)'}                    | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
+    ${'rgb(0 30 60)'}                            | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
+    ${'rgb(0 30 60 / 0.5)'}                      | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
+    ${'rgb(var(--foo), 30, 60)'}                 | ${{ mode: 'rgb', color: ['var(--foo)', '30', '60'], alpha: undefined }}
+    ${'rgb(0, var(--foo), 60)'}                  | ${{ mode: 'rgb', color: ['0', 'var(--foo)', '60'], alpha: undefined }}
+    ${'rgb(0, 30, var(--foo))'}                  | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: undefined }}
+    ${'rgb(0, 30, var(--foo), 0.5)'}             | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: '0.5' }}
+    ${'rgb(var(--foo), 30, var(--bar))'}         | ${{ mode: 'rgb', color: ['var(--foo)', '30', 'var(--bar)'], alpha: undefined }}
+    ${'rgb(var(--foo), var(--bar), var(--baz))'} | ${{ mode: 'rgb', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
+    ${'rgb(var(--foo) 30 60)'}                   | ${{ mode: 'rgb', color: ['var(--foo)', '30', '60'], alpha: undefined }}
+    ${'rgb(0 var(--foo) 60)'}                    | ${{ mode: 'rgb', color: ['0', 'var(--foo)', '60'], alpha: undefined }}
+    ${'rgb(0 30 var(--foo))'}                    | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: undefined }}
+    ${'rgb(0 30 var(--foo) / 0.5)'}              | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: '0.5' }}
+    ${'rgb(var(--foo) 30 var(--bar))'}           | ${{ mode: 'rgb', color: ['var(--foo)', '30', 'var(--bar)'], alpha: undefined }}
+    ${'rgb(var(--foo) var(--bar) var(--baz))'}   | ${{ mode: 'rgb', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
+    ${'hsl(0, 30%, 60%)'}                        | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0deg, 30%, 60%)'}                     | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0rad, 30%, 60%)'}                     | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0grad, 30%, 60%)'}                    | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0turn, 30%, 60%)'}                    | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: undefined }}
+    ${'hsla(0, 30%, 60%, 0.5)'}                  | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
+    ${'hsla(0deg, 30%, 60%, 0.5)'}               | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
+    ${'hsla(0rad, 30%, 60%, 0.5)'}               | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
+    ${'hsla(0grad, 30%, 60%, 0.5)'}              | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
+    ${'hsla(0turn, 30%, 60%, 0.5)'}              | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(0 30% 60%)'}                          | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0deg 30% 60%)'}                       | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0rad 30% 60%)'}                       | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0grad 30% 60%)'}                      | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0turn 30% 60%)'}                      | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0 30% 60% / 0.5)'}                    | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(0deg 30% 60% / 0.5)'}                 | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(0rad 30% 60% / 0.5)'}                 | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(0grad 30% 60% / 0.5)'}                | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(0turn 30% 60% / 0.5)'}                | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(var(--foo), 30%, 60%)'}               | ${{ mode: 'hsl', color: ['var(--foo)', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0, var(--foo), 60%)'}                 | ${{ mode: 'hsl', color: ['0', 'var(--foo)', '60%'], alpha: undefined }}
+    ${'hsl(0, 30%, var(--foo))'}                 | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: undefined }}
+    ${'hsl(0, 30%, var(--foo), 0.5)'}            | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: '0.5' }}
+    ${'hsl(var(--foo), 30%, var(--bar))'}        | ${{ mode: 'hsl', color: ['var(--foo)', '30%', 'var(--bar)'], alpha: undefined }}
+    ${'hsl(var(--foo), var(--bar), var(--baz))'} | ${{ mode: 'hsl', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
+    ${'hsl(var(--foo) 30% 60%)'}                 | ${{ mode: 'hsl', color: ['var(--foo)', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0 var(--foo) 60%)'}                   | ${{ mode: 'hsl', color: ['0', 'var(--foo)', '60%'], alpha: undefined }}
+    ${'hsl(0 30% var(--foo))'}                   | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: undefined }}
+    ${'hsl(0 30% var(--foo) / 0.5)'}             | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: '0.5' }}
+    ${'hsl(var(--foo) 30% var(--bar))'}          | ${{ mode: 'hsl', color: ['var(--foo)', '30%', 'var(--bar)'], alpha: undefined }}
+    ${'hsl(var(--foo) var(--bar) var(--baz))'}   | ${{ mode: 'hsl', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
+    ${'transparent'}                             | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: '0' }}
   `('should parse "$color" to the correct value', ({ color, output }) => {
     expect(parseColor(color)).toEqual(output)
   })
diff --git a/tests/variants.test.css b/tests/variants.test.css
index fe38d4fa..497797a5 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -261,6 +261,12 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.backdrop\:shadow-md::backdrop {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .focus-within\:shadow-md:focus-within {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
diff --git a/tests/variants.test.html b/tests/variants.test.html
index b0b858c1..3d8324df 100644
--- a/tests/variants.test.html
+++ b/tests/variants.test.html
@@ -39,6 +39,7 @@
     <div class="out-of-range:shadow-md"></div>
     <div class="read-only:shadow-md"></div>
     <div class="empty:shadow-md"></div>
+    <dialog class="backdrop:shadow-md"></dialog>
 
     <!-- Pseudo-element variants -->
     <div class="first-letter:text-2xl first-letter:text-red-500"></div>