From 49cb53cba2cf063d186215f620570b7d0bbfa11a Mon Sep 17 00:00:00 2001
From: Emmanuel Krebs <e-krebs@users.noreply.github.com>
Date: Mon, 21 Jun 2021 15:23:25 +0200
Subject: [PATCH 1/2] add missing documentation for :empty pseudo-class

which was added with [this PR](https://github.com/tailwindlabs/tailwindcss/pull/3298)
---
 .../docs/hover-focus-and-other-states.mdx     | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/pages/docs/hover-focus-and-other-states.mdx b/src/pages/docs/hover-focus-and-other-states.mdx
index 48a2ad481..589dc822c 100644
--- a/src/pages/docs/hover-focus-and-other-states.mdx
+++ b/src/pages/docs/hover-focus-and-other-states.mdx
@@ -716,6 +716,40 @@ 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
+<template preview>
+  <div class="flex justify around">
+    <div class="bg-amber-500 text-white rounded-md p-8 empty:hidden">displayed</div>
+    <div class="bg-amber-500 text-white rounded-md p-8 empty:hidden"><!--hidden--></div>
+  </div>
+</template>
+
+<div class="**empty:hidden** ...">
+```
+<div>
+  <VariantEnabledList variant="empty"/>
+</div>
+
+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.

From be99fa9aa868806d43e780d8ffcc2f619dab0c04 Mon Sep 17 00:00:00 2001
From: Emmanuel Krebs <e-krebs@users.noreply.github.com>
Date: Mon, 21 Jun 2021 15:32:18 +0200
Subject: [PATCH 2/2] update code displayed

---
 src/pages/docs/hover-focus-and-other-states.mdx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/docs/hover-focus-and-other-states.mdx b/src/pages/docs/hover-focus-and-other-states.mdx
index 589dc822c..a607cf39d 100644
--- a/src/pages/docs/hover-focus-and-other-states.mdx
+++ b/src/pages/docs/hover-focus-and-other-states.mdx
@@ -728,7 +728,10 @@ Add the `empty:` prefix to only apply a utility when the element has no children
   </div>
 </template>
 
-<div class="**empty:hidden** ...">
+<div class="...">
+  <div class="**empty:hidden** ...">displayed</div>
+  <div class="**empty:hidden** ..."><!--hidden--></div>
+</div>
 ```
 <div>
   <VariantEnabledList variant="empty"/>