From 6c4b86d4386c328d4109555099d4bdf22864766b Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Tue, 16 Nov 2021 15:33:30 +0100
Subject: [PATCH] Add `placeholder` variant (#6106)

* add `placeholder` variant

* update changelog
---
 CHANGELOG.md             | 4 ++++
 src/corePlugins.js       | 2 ++
 tests/variants.test.css  | 7 +++++++
 tests/variants.test.html | 1 +
 4 files changed, 14 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 532c71f598f4..15756dfd6394 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,10 @@ Nothing yet!
 
 - Enforce the order of some variants (like `before` and `after`) ([#6018](https://github.com/tailwindlabs/tailwindcss/pull/6018))
 
+### Added
+
+- Add `placeholder` variant ([#6106](https://github.com/tailwindlabs/tailwindcss/pull/6106))
+
 ## [3.0.0-alpha.2] - 2021-11-08
 
 ### Changed
diff --git a/src/corePlugins.js b/src/corePlugins.js
index 5309475ce4ca..dc76e279dc4c 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -23,6 +23,8 @@ export let variantPlugins = {
 
     addVariant('file', '&::file-selector-button')
 
+    addVariant('placeholder', '&::placeholder')
+
     addVariant('before', ({ container }) => {
       container.walkRules((rule) => {
         let foundContent = false
diff --git a/tests/variants.test.css b/tests/variants.test.css
index f1c9b0e495a3..f538b537f208 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -165,6 +165,13 @@
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.placeholder\:font-bold::placeholder {
+  font-weight: 700;
+}
+.placeholder\:text-red-500::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
 .before\:block::before {
   content: var(--tw-content);
   display: block;
diff --git a/tests/variants.test.html b/tests/variants.test.html
index 8a671fe235a2..075ff0cd75d8 100644
--- a/tests/variants.test.html
+++ b/tests/variants.test.html
@@ -49,6 +49,7 @@
     <div class="file:bg-blue-500 file:text-white"></div>
     <div class="before:block before:bg-red-500"></div>
     <div class="after:flex after:uppercase"></div>
+    <div class="placeholder:font-bold placeholder:text-red-500"></div>
 
     <!-- Group variants -->
     <div class="group-open:bg-red-200"></div>