Add placeholder color utilities

__tests__/fixtures/tailwind-output-important.css

@@ -5760,6 +5760,378 @@ video {
   padding-left: 1px !important;
 }
 
+.placeholder-transparent::placeholder {
+  color: transparent !important;
+}
+
+.placeholder-black::placeholder {
+  color: #000 !important;
+}
+
+.placeholder-white::placeholder {
+  color: #fff !important;
+}
+
+.placeholder-gray-100::placeholder {
+  color: #f7fafc !important;
+}
+
+.placeholder-gray-200::placeholder {
+  color: #edf2f7 !important;
+}
+
+.placeholder-gray-300::placeholder {
+  color: #e2e8f0 !important;
+}
+
+.placeholder-gray-400::placeholder {
+  color: #cbd5e0 !important;
+}
+
+.placeholder-gray-500::placeholder {
+  color: #a0aec0 !important;
+}
+
+.placeholder-gray-600::placeholder {
+  color: #718096 !important;
+}
+
+.placeholder-gray-700::placeholder {
+  color: #4a5568 !important;
+}
+
+.placeholder-gray-800::placeholder {
+  color: #2d3748 !important;
+}
+
+.placeholder-gray-900::placeholder {
+  color: #1a202c !important;
+}
+
+.placeholder-red-100::placeholder {
+  color: #fff5f5 !important;
+}
+
+.placeholder-red-200::placeholder {
+  color: #fed7d7 !important;
+}
+
+.placeholder-red-300::placeholder {
+  color: #feb2b2 !important;
+}
+
+.placeholder-red-400::placeholder {
+  color: #fc8181 !important;
+}
+
+.placeholder-red-500::placeholder {
+  color: #f56565 !important;
+}
+
+.placeholder-red-600::placeholder {
+  color: #e53e3e !important;
+}
+
+.placeholder-red-700::placeholder {
+  color: #c53030 !important;
+}
+
+.placeholder-red-800::placeholder {
+  color: #9b2c2c !important;
+}
+
+.placeholder-red-900::placeholder {
+  color: #742a2a !important;
+}
+
+.placeholder-orange-100::placeholder {
+  color: #fffaf0 !important;
+}
+
+.placeholder-orange-200::placeholder {
+  color: #feebc8 !important;
+}
+
+.placeholder-orange-300::placeholder {
+  color: #fbd38d !important;
+}
+
+.placeholder-orange-400::placeholder {
+  color: #f6ad55 !important;
+}
+
+.placeholder-orange-500::placeholder {
+  color: #ed8936 !important;
+}
+
+.placeholder-orange-600::placeholder {
+  color: #dd6b20 !important;
+}
+
+.placeholder-orange-700::placeholder {
+  color: #c05621 !important;
+}
+
+.placeholder-orange-800::placeholder {
+  color: #9c4221 !important;
+}
+
+.placeholder-orange-900::placeholder {
+  color: #7b341e !important;
+}
+
+.placeholder-yellow-100::placeholder {
+  color: #fffff0 !important;
+}
+
+.placeholder-yellow-200::placeholder {
+  color: #fefcbf !important;
+}
+
+.placeholder-yellow-300::placeholder {
+  color: #faf089 !important;
+}
+
+.placeholder-yellow-400::placeholder {
+  color: #f6e05e !important;
+}
+
+.placeholder-yellow-500::placeholder {
+  color: #ecc94b !important;
+}
+
+.placeholder-yellow-600::placeholder {
+  color: #d69e2e !important;
+}
+
+.placeholder-yellow-700::placeholder {
+  color: #b7791f !important;
+}
+
+.placeholder-yellow-800::placeholder {
+  color: #975a16 !important;
+}
+
+.placeholder-yellow-900::placeholder {
+  color: #744210 !important;
+}
+
+.placeholder-green-100::placeholder {
+  color: #f0fff4 !important;
+}
+
+.placeholder-green-200::placeholder {
+  color: #c6f6d5 !important;
+}
+
+.placeholder-green-300::placeholder {
+  color: #9ae6b4 !important;
+}
+
+.placeholder-green-400::placeholder {
+  color: #68d391 !important;
+}
+
+.placeholder-green-500::placeholder {
+  color: #48bb78 !important;
+}
+
+.placeholder-green-600::placeholder {
+  color: #38a169 !important;
+}
+
+.placeholder-green-700::placeholder {
+  color: #2f855a !important;
+}
+
+.placeholder-green-800::placeholder {
+  color: #276749 !important;
+}
+
+.placeholder-green-900::placeholder {
+  color: #22543d !important;
+}
+
+.placeholder-teal-100::placeholder {
+  color: #e6fffa !important;
+}
+
+.placeholder-teal-200::placeholder {
+  color: #b2f5ea !important;
+}
+
+.placeholder-teal-300::placeholder {
+  color: #81e6d9 !important;
+}
+
+.placeholder-teal-400::placeholder {
+  color: #4fd1c5 !important;
+}
+
+.placeholder-teal-500::placeholder {
+  color: #38b2ac !important;
+}
+
+.placeholder-teal-600::placeholder {
+  color: #319795 !important;
+}
+
+.placeholder-teal-700::placeholder {
+  color: #2c7a7b !important;
+}
+
+.placeholder-teal-800::placeholder {
+  color: #285e61 !important;
+}
+
+.placeholder-teal-900::placeholder {
+  color: #234e52 !important;
+}
+
+.placeholder-blue-100::placeholder {
+  color: #ebf8ff !important;
+}
+
+.placeholder-blue-200::placeholder {
+  color: #bee3f8 !important;
+}
+
+.placeholder-blue-300::placeholder {
+  color: #90cdf4 !important;
+}
+
+.placeholder-blue-400::placeholder {
+  color: #63b3ed !important;
+}
+
+.placeholder-blue-500::placeholder {
+  color: #4299e1 !important;
+}
+
+.placeholder-blue-600::placeholder {
+  color: #3182ce !important;
+}
+
+.placeholder-blue-700::placeholder {
+  color: #2b6cb0 !important;
+}
+
+.placeholder-blue-800::placeholder {
+  color: #2c5282 !important;
+}
+
+.placeholder-blue-900::placeholder {
+  color: #2a4365 !important;
+}
+
+.placeholder-indigo-100::placeholder {
+  color: #ebf4ff !important;
+}
+
+.placeholder-indigo-200::placeholder {
+  color: #c3dafe !important;
+}
+
+.placeholder-indigo-300::placeholder {
+  color: #a3bffa !important;
+}
+
+.placeholder-indigo-400::placeholder {
+  color: #7f9cf5 !important;
+}
+
+.placeholder-indigo-500::placeholder {
+  color: #667eea !important;
+}
+
+.placeholder-indigo-600::placeholder {
+  color: #5a67d8 !important;
+}
+
+.placeholder-indigo-700::placeholder {
+  color: #4c51bf !important;
+}
+
+.placeholder-indigo-800::placeholder {
+  color: #434190 !important;
+}
+
+.placeholder-indigo-900::placeholder {
+  color: #3c366b !important;
+}
+
+.placeholder-purple-100::placeholder {
+  color: #faf5ff !important;
+}
+
+.placeholder-purple-200::placeholder {
+  color: #e9d8fd !important;
+}
+
+.placeholder-purple-300::placeholder {
+  color: #d6bcfa !important;
+}
+
+.placeholder-purple-400::placeholder {
+  color: #b794f4 !important;
+}
+
+.placeholder-purple-500::placeholder {
+  color: #9f7aea !important;
+}
+
+.placeholder-purple-600::placeholder {
+  color: #805ad5 !important;
+}
+
+.placeholder-purple-700::placeholder {
+  color: #6b46c1 !important;
+}
+
+.placeholder-purple-800::placeholder {
+  color: #553c9a !important;
+}
+
+.placeholder-purple-900::placeholder {
+  color: #44337a !important;
+}
+
+.placeholder-pink-100::placeholder {
+  color: #fff5f7 !important;
+}
+
+.placeholder-pink-200::placeholder {
+  color: #fed7e2 !important;
+}
+
+.placeholder-pink-300::placeholder {
+  color: #fbb6ce !important;
+}
+
+.placeholder-pink-400::placeholder {
+  color: #f687b3 !important;
+}
+
+.placeholder-pink-500::placeholder {
+  color: #ed64a6 !important;
+}
+
+.placeholder-pink-600::placeholder {
+  color: #d53f8c !important;
+}
+
+.placeholder-pink-700::placeholder {
+  color: #b83280 !important;
+}
+
+.placeholder-pink-800::placeholder {
+  color: #97266d !important;
+}
+
+.placeholder-pink-900::placeholder {
+  color: #702459 !important;
+}
+
 .pointer-events-none {
   pointer-events: none !important;
 }

__tests__/fixtures/tailwind-output.css

@@ -5760,6 +5760,378 @@ video {
   padding-left: 1px;
 }
 
+.placeholder-transparent::placeholder {
+  color: transparent;
+}
+
+.placeholder-black::placeholder {
+  color: #000;
+}
+
+.placeholder-white::placeholder {
+  color: #fff;
+}
+
+.placeholder-gray-100::placeholder {
+  color: #f7fafc;
+}
+
+.placeholder-gray-200::placeholder {
+  color: #edf2f7;
+}
+
+.placeholder-gray-300::placeholder {
+  color: #e2e8f0;
+}
+
+.placeholder-gray-400::placeholder {
+  color: #cbd5e0;
+}
+
+.placeholder-gray-500::placeholder {
+  color: #a0aec0;
+}
+
+.placeholder-gray-600::placeholder {
+  color: #718096;
+}
+
+.placeholder-gray-700::placeholder {
+  color: #4a5568;
+}
+
+.placeholder-gray-800::placeholder {
+  color: #2d3748;
+}
+
+.placeholder-gray-900::placeholder {
+  color: #1a202c;
+}
+
+.placeholder-red-100::placeholder {
+  color: #fff5f5;
+}
+
+.placeholder-red-200::placeholder {
+  color: #fed7d7;
+}
+
+.placeholder-red-300::placeholder {
+  color: #feb2b2;
+}
+
+.placeholder-red-400::placeholder {
+  color: #fc8181;
+}
+
+.placeholder-red-500::placeholder {
+  color: #f56565;
+}
+
+.placeholder-red-600::placeholder {
+  color: #e53e3e;
+}
+
+.placeholder-red-700::placeholder {
+  color: #c53030;
+}
+
+.placeholder-red-800::placeholder {
+  color: #9b2c2c;
+}
+
+.placeholder-red-900::placeholder {
+  color: #742a2a;
+}
+
+.placeholder-orange-100::placeholder {
+  color: #fffaf0;
+}
+
+.placeholder-orange-200::placeholder {
+  color: #feebc8;
+}
+
+.placeholder-orange-300::placeholder {
+  color: #fbd38d;
+}
+
+.placeholder-orange-400::placeholder {
+  color: #f6ad55;
+}
+
+.placeholder-orange-500::placeholder {
+  color: #ed8936;
+}
+
+.placeholder-orange-600::placeholder {
+  color: #dd6b20;
+}
+
+.placeholder-orange-700::placeholder {
+  color: #c05621;
+}
+
+.placeholder-orange-800::placeholder {
+  color: #9c4221;
+}
+
+.placeholder-orange-900::placeholder {
+  color: #7b341e;
+}
+
+.placeholder-yellow-100::placeholder {
+  color: #fffff0;
+}
+
+.placeholder-yellow-200::placeholder {
+  color: #fefcbf;
+}
+
+.placeholder-yellow-300::placeholder {
+  color: #faf089;
+}
+
+.placeholder-yellow-400::placeholder {
+  color: #f6e05e;
+}
+
+.placeholder-yellow-500::placeholder {
+  color: #ecc94b;
+}
+
+.placeholder-yellow-600::placeholder {
+  color: #d69e2e;
+}
+
+.placeholder-yellow-700::placeholder {
+  color: #b7791f;
+}
+
+.placeholder-yellow-800::placeholder {
+  color: #975a16;
+}
+
+.placeholder-yellow-900::placeholder {
+  color: #744210;
+}
+
+.placeholder-green-100::placeholder {
+  color: #f0fff4;
+}
+
+.placeholder-green-200::placeholder {
+  color: #c6f6d5;
+}
+
+.placeholder-green-300::placeholder {
+  color: #9ae6b4;
+}
+
+.placeholder-green-400::placeholder {
+  color: #68d391;
+}
+
+.placeholder-green-500::placeholder {
+  color: #48bb78;
+}
+
+.placeholder-green-600::placeholder {
+  color: #38a169;
+}
+
+.placeholder-green-700::placeholder {
+  color: #2f855a;
+}
+
+.placeholder-green-800::placeholder {
+  color: #276749;
+}
+
+.placeholder-green-900::placeholder {
+  color: #22543d;
+}
+
+.placeholder-teal-100::placeholder {
+  color: #e6fffa;
+}
+
+.placeholder-teal-200::placeholder {
+  color: #b2f5ea;
+}
+
+.placeholder-teal-300::placeholder {
+  color: #81e6d9;
+}
+
+.placeholder-teal-400::placeholder {
+  color: #4fd1c5;
+}
+
+.placeholder-teal-500::placeholder {
+  color: #38b2ac;
+}
+
+.placeholder-teal-600::placeholder {
+  color: #319795;
+}
+
+.placeholder-teal-700::placeholder {
+  color: #2c7a7b;
+}
+
+.placeholder-teal-800::placeholder {
+  color: #285e61;
+}
+
+.placeholder-teal-900::placeholder {
+  color: #234e52;
+}
+
+.placeholder-blue-100::placeholder {
+  color: #ebf8ff;
+}
+
+.placeholder-blue-200::placeholder {
+  color: #bee3f8;
+}
+
+.placeholder-blue-300::placeholder {
+  color: #90cdf4;
+}
+
+.placeholder-blue-400::placeholder {
+  color: #63b3ed;
+}
+
+.placeholder-blue-500::placeholder {
+  color: #4299e1;
+}
+
+.placeholder-blue-600::placeholder {
+  color: #3182ce;
+}
+
+.placeholder-blue-700::placeholder {
+  color: #2b6cb0;
+}
+
+.placeholder-blue-800::placeholder {
+  color: #2c5282;
+}
+
+.placeholder-blue-900::placeholder {
+  color: #2a4365;
+}
+
+.placeholder-indigo-100::placeholder {
+  color: #ebf4ff;
+}
+
+.placeholder-indigo-200::placeholder {
+  color: #c3dafe;
+}
+
+.placeholder-indigo-300::placeholder {
+  color: #a3bffa;
+}
+
+.placeholder-indigo-400::placeholder {
+  color: #7f9cf5;
+}
+
+.placeholder-indigo-500::placeholder {
+  color: #667eea;
+}
+
+.placeholder-indigo-600::placeholder {
+  color: #5a67d8;
+}
+
+.placeholder-indigo-700::placeholder {
+  color: #4c51bf;
+}
+
+.placeholder-indigo-800::placeholder {
+  color: #434190;
+}
+
+.placeholder-indigo-900::placeholder {
+  color: #3c366b;
+}
+
+.placeholder-purple-100::placeholder {
+  color: #faf5ff;
+}
+
+.placeholder-purple-200::placeholder {
+  color: #e9d8fd;
+}
+
+.placeholder-purple-300::placeholder {
+  color: #d6bcfa;
+}
+
+.placeholder-purple-400::placeholder {
+  color: #b794f4;
+}
+
+.placeholder-purple-500::placeholder {
+  color: #9f7aea;
+}
+
+.placeholder-purple-600::placeholder {
+  color: #805ad5;
+}
+
+.placeholder-purple-700::placeholder {
+  color: #6b46c1;
+}
+
+.placeholder-purple-800::placeholder {
+  color: #553c9a;
+}
+
+.placeholder-purple-900::placeholder {
+  color: #44337a;
+}
+
+.placeholder-pink-100::placeholder {
+  color: #fff5f7;
+}
+
+.placeholder-pink-200::placeholder {
+  color: #fed7e2;
+}
+
+.placeholder-pink-300::placeholder {
+  color: #fbb6ce;
+}
+
+.placeholder-pink-400::placeholder {
+  color: #f687b3;
+}
+
+.placeholder-pink-500::placeholder {
+  color: #ed64a6;
+}
+
+.placeholder-pink-600::placeholder {
+  color: #d53f8c;
+}
+
+.placeholder-pink-700::placeholder {
+  color: #b83280;
+}
+
+.placeholder-pink-800::placeholder {
+  color: #97266d;
+}
+
+.placeholder-pink-900::placeholder {
+  color: #702459;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }

src/corePlugins.js

@@ -42,6 +42,7 @@ import opacity from './plugins/opacity'
 import outline from './plugins/outline'
 import overflow from './plugins/overflow'
 import padding from './plugins/padding'
+import placeholderColor from './plugins/placeholderColor'
 import pointerEvents from './plugins/pointerEvents'
 import position from './plugins/position'
 import inset from './plugins/inset'
@@ -114,6 +115,7 @@ export default function({ corePlugins: corePluginConfig }) {
     outline,
     overflow,
     padding,
+    placeholderColor,
     pointerEvents,
     position,
     inset,

src/plugins/placeholderColor.js

@@ -0,0 +1,19 @@
+import _ from 'lodash'
+import flattenColorPalette from '../util/flattenColorPalette'
+
+export default function() {
+  return function({ addUtilities, e, theme, variants }) {
+    const utilities = _.fromPairs(
+      _.map(flattenColorPalette(theme('placeholderColor')), (value, modifier) => {
+        return [
+          `.${e(`placeholder-${modifier}`)}::placeholder`,
+          {
+            color: value,
+          },
+        ]
+      })
+    )
+
+    addUtilities(utilities, variants('placeholderColor'))
+  }
+}

stubs/defaultConfig.stub.js

@@ -371,6 +371,7 @@ module.exports = {
       '12': '12',
     },
     padding: theme => theme('spacing'),
+    placeholderColor: theme => theme('colors'),
     stroke: {
       current: 'currentColor',
     },