Merge pull request #1063 from tailwindcss/placeholder-utilities

Add placeholder color utilities

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',
     },
@@ -467,6 +468,7 @@ module.exports = {
     outline: ['responsive', 'focus'],
     overflow: ['responsive'],
     padding: ['responsive'],
+    placeholderColor: ['responsive', 'focus'],
     pointerEvents: ['responsive'],
     position: ['responsive'],
     resize: ['responsive'],