Add empty variant support to JIT

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - JIT: Support applying important utility variants ([#4260](https://github.com/tailwindlabs/tailwindcss/pull/4260))
 - JIT: Support coercing arbitrary values when the type isn't detectable ([#4263](https://github.com/tailwindlabs/tailwindcss/pull/4263))
 - JIT: Support for `raw` syntax in `purge` config ([#4272](https://github.com/tailwindlabs/tailwindcss/pull/4272))
+- Add `empty` variant ([#3298](https://github.com/tailwindlabs/tailwindcss/pull/3298))
 
 ### Fixed
 

src/jit/corePlugins.js

@@ -19,6 +19,7 @@ export default {
       ['even', 'nth-child(even)'],
       'visited',
       'checked',
+      'empty',
       'focus-within',
       'hover',
       'focus',

tests/jit/variants.test.css

@@ -42,6 +42,11 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.empty\:shadow-md:empty {
+  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  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 rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),

tests/jit/variants.test.html

@@ -22,6 +22,7 @@
     <div class="checked:shadow-md"></div>
     <div class="focus-within:shadow-md"></div>
     <div class="focus-visible:shadow-md"></div>
+    <div class="empty:shadow-md"></div>
 
     <!-- Group variants -->
     <div class="group-hover:shadow-md"></div>