diff --git a/CHANGELOG.md b/CHANGELOG.md
index f06aa46cb..0e0c55dc4 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/jit/corePlugins.js b/src/jit/corePlugins.js
index 11886db4f..36a4b6b90 100644
--- a/src/jit/corePlugins.js
+++ b/src/jit/corePlugins.js
@@ -19,6 +19,7 @@ export default {
       ['even', 'nth-child(even)'],
       'visited',
       'checked',
+      'empty',
       'focus-within',
       'hover',
       'focus',
diff --git a/tests/jit/variants.test.css b/tests/jit/variants.test.css
index e4de15741..8d12a7ffd 100644
--- a/tests/jit/variants.test.css
+++ b/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),
diff --git a/tests/jit/variants.test.html b/tests/jit/variants.test.html
index 29c0eab3d..def9b08f3 100644
--- a/tests/jit/variants.test.html
+++ b/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>