How to Style Placeholder Text with Tailwind CSS

Updated: December 15, 2023 By: Khue 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) in combination with text utility classes, such as placeholder:text-2xl, placeholder:text-red-500, placeholder:semibold, etc.


The code:

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

That’s it. Happy coding & have a nice day!