Added display: 'contents'

src/corePlugins.js

@@ -43,6 +43,7 @@ import outline from './plugins/outline'
 import overflow from './plugins/overflow'
 import padding from './plugins/padding'
 import placeholderColor from './plugins/placeholderColor'
+import placeholderPosition from './plugins/placeholderPosition'
 import pointerEvents from './plugins/pointerEvents'
 import position from './plugins/position'
 import inset from './plugins/inset'
@@ -116,6 +117,7 @@ export default function({ corePlugins: corePluginConfig }) {
     overflow,
     padding,
     placeholderColor,
+    placeholderPosition,
     pointerEvents,
     position,
     inset,

src/plugins/display.js

@@ -26,6 +26,9 @@ export default function() {
         '.table-cell': {
           display: 'table-cell',
         },
+        '.contents': {
+          display: 'contents',
+        },
         '.hidden': {
           display: 'none',
         },

src/plugins/placeholderPosition.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('placeholderPosition')), (value, modifier) => {
+        return [
+          `.${e(`placeholder-${modifier}`)}::placeholder`,
+          {
+            'text-align': value,
+          },
+        ]
+      })
+    )
+
+    addUtilities(utilities, variants('placeholderPosition'))
+  }
+}

stubs/defaultConfig.stub.js

@@ -372,6 +372,11 @@ module.exports = {
     },
     padding: theme => theme('spacing'),
     placeholderColor: theme => theme('colors'),
+    placeholderPosition: {
+      center: 'center',
+      left: 'left',
+      right: 'right',
+    },
     stroke: {
       current: 'currentColor',
     },
@@ -469,6 +474,7 @@ module.exports = {
     overflow: ['responsive'],
     padding: ['responsive'],
     placeholderColor: ['responsive', 'focus'],
+    placeholderPosition: ['responsive'],
     pointerEvents: ['responsive'],
     position: ['responsive'],
     resize: ['responsive'],