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.
[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" />
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" />