How to Style Placeholder Text with Tailwind CSS

In Tailwind CSS, you can style the placeholder text of an input field (or textarea) by using the placeholder modifier (a modifier is a prefix word that can be added to the beginning of a utility class).

Example:

The code:

<div class="w-screen h-screen p-20 bg-blue-600">
       <input class="placeholder:text-blue-300 placeholder:italic placeholder:uppercase w-96 px-5 py-2 rounded-full outline-none"   placeholder="Welcome to KindaCode.com" />
</div>

That’s it. Further reading:

• Tailwind CSS: How to Create a Sticky/Affix NavBar
• Tailwind CSS: How to Create Columns with the Same Height
• How to Use Tailwind CSS in React
• How to create cut-out text effect with Tailwind CSS
• Tailwind CSS: Center an Element inside a Div
• CSS: Styling Scrollbar Example

You can also check out our CSS category page for the latest tutorials and examples.