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.
Example:
The code:
<body>
<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 SlingAcademy.com" />
</div>
</body>That’s it. Happy coding & have a nice day!
