diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index c7f47dcf2..496acc802 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__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; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index eafc0877c..d32a783e2 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__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; } diff --git a/src/corePlugins.js b/src/corePlugins.js index 3aef64f70..b0bf35235 100644 --- a/src/corePlugins.js +++ b/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, diff --git a/src/plugins/placeholderColor.js b/src/plugins/placeholderColor.js new file mode 100644 index 000000000..b8c81fad6 --- /dev/null +++ b/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')) + } +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 2b68d5179..09f800bdb 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -371,6 +371,7 @@ module.exports = { '12': '12', }, padding: theme => theme('spacing'), + placeholderColor: theme => theme('colors'), stroke: { current: 'currentColor', },