Add placeholder variant (#6106)

* add `placeholder` variant * update changelog
tailwindlabs · Nov 16, 2021 · 6c4b86d · 6c4b86d
1 parent 85320c2
commit 6c4b86d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>