Placeholder text in forms provides hints to the users about the purpose of that input box. TailwindCSS makes it super easy to style the placeholder text according to the user’s preferences. This article will cover various approaches for placeholder text to enhance the user experience.

Default style

<input type="text" placeholder="Enter text">

Changing the color

<input type="text" class="placeholder-blue-500" placeholder="Enter text">

Increasing the font size

<input type="text" class="text-lg" placeholder="Enter text">

Italic style

<input type="text" class="italic" placeholder="Enter text">

Changing background colour

<input type="text" class="bg-gray-100" placeholder="Enter text">

Making the font bold

<input type="text" class="font-bold" placeholder="Enter text">

Increasing spacing between text

<input type="text" class="tracking-wider" placeholder="Enter text">

Changing font style

<input type="text" class="font-serif" placeholder="Enter text">

Capitalizing text

<input type="text" class="uppercase" placeholder="Enter text">

Example: Implementation to style placeholder using multiple approaches.

Output :