diff --git a/src/pages/docs/hover-focus-and-other-states.mdx b/src/pages/docs/hover-focus-and-other-states.mdx
index 48a2ad481..a607cf39d 100644
--- a/src/pages/docs/hover-focus-and-other-states.mdx
+++ b/src/pages/docs/hover-focus-and-other-states.mdx
@@ -716,6 +716,43 @@ module.exports = {
---
+## Empty
+
+Add the `empty:` prefix to only apply a utility when the element has no children. Children can be either element nodes or text (including whitespace).
+
+```html amber
+
+
+
+
+
+```
+
+
+
+
+You can control whether `empty` variants are enabled for a plugin in the `variants` section of your `tailwind.config.js` file:
+
+```js
+// tailwind.config.js
+module.exports = {
+ // ...
+ variants: {
+ extend: {
+ display: ['empty'],
+ }
+ },
+}
+```
+
+---
+
## Combining with responsive prefixes
State variants are also responsive, meaning you can do things like change an element's hover style at different breakpoints for example.