How to Style Placeholder Text with Tailwind CSS

Last updated on May 7, 2022 Pennywise Loading... Post a comment

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:

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

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like