Add backdrop variant (#7924)

* Update corePlugins.js * Update variants.test.html * Update variants.test.css
tailwindlabs · Mar 25, 2022 · 79f018c · 79f018c
1 parent b2dd6ff
commit 79f018c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git 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/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
@@ -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>