Add placeholder variant (tailwindlabs#6106)

* add `placeholder` variant

* update changelog

Author: RobinMalfait

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

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

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;

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>