tailwindcss-placeholders

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.