How to Change Placeholder Color in Tailwind CSS?

Change Placeholder Color in Tailwind

Tailwind CSS offers an array of classes to customize various aspects of an element, including its placeholder color. To change the placeholder color, add the placeholder-[color] class to the input element.

Replace [color] with the desired color, such as gray, red, blue, or any other valid color from the Tailwind CSS color palette.

<input
  type="text"
  class="input placeholder-blue-500"
  placeholder="Your Placeholder"
/>

Fine-tuning Opacity

If you wish to adjust the opacity of the placeholder color to create a subtle effect, you can utilize the placeholder-opacity-[value] class. Replace [value] with a number between 0 and 100, representing the desired opacity level.

<input
  type="text"
  class="input placeholder-blue-500 placeholder-opacity-50"
  placeholder="Your Placeholder"
/>