Add backdrop variant (#7924)

* Update corePlugins.js

* Update variants.test.html

* Update variants.test.css

Author: seb-jean

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) => {

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);

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>