1.2.0 • Published 5 years ago
tailwindcss-placeholders v1.2.0
TailwindCSS Placeholders
TailwindCSS plugin that generates placeholder utilities.
Installation
Install it with npm or yarn.
npm install tailwindcss-placeholders
yarn add tailwindcss-placeholders
Usage
Add it to the plugins section of your tailwind.config.js
file.
plugins: [
require('tailwindcss-placeholders')(),
],
Use it to override the color and opacity of the placeholder.
<input class="ph-blue-500 ph-opacity-100" type="text" placeholder="This is now blue">
How it works
For each color in theme.textColor
it adds the class ph-{color}::placeholder
.
For each opacity in theme.opacity
it adds the class ph-opacity-{opacity}
Warning
If you're using autoprefixer, it will add the following prefixes:
.ph-blue-500::-webkit-input-placeholder {
color: #4299e1;
}
.ph-blue-500:-ms-input-placeholder {
color: #4299e1;
}
.ph-blue-500::-ms-input-placeholder {
color: #4299e1;
}
.ph-blue-500::placeholder {
color: #4299e1;
}
To avoid increasing your file size, make sure to use purgecss to remove any unused CSS.
License
This project is licensed under the MIT License.