3 Simple Methods to Style Placeholder Text in Tailwind CSS

Default placeholder text styles are so great for custom designs. As you might know, that placeholder text can be styled with CSS and also with TailwindCSS. Here are different ways to style placeholders with Tailwind CSS.

Method 1: Styling Placeholder with TailwindCSS Classes

This is a useful method when you don’t want to style every input element but instead, you want to style just a couple of elements. TailwindCSS provides placeholder: modifier to apply any style on placeholder text. Here is an example that you can also check online on tailwind playground.

The above example will look like the below screenshot when run.

Tailwindcss placeholder style

Method 2: Custom Class to Style Placeholder in TailwindCSS

You can create your custom class in TailwindCSS if you are wishing to use it on different elements. Here is an example of a custom class that changes the placeholder styles and can be used on multiple elements.  Here is an example and a working demo.

Custom class to the style placeholder text.

Using the class in HTML.

Method 3: MChanging Base Styles to Add Custom Placeholder Styles

If you don’t want to add any class to your input elements and want to change the styles for every placeholder for a specific input type. Here is another method that will work for you. In this method, you need to change the base styles of the placeholder for the input element you want. TailwindCSS provides a way to change any style of the base layer. Here is an example.


You can style placeholder text in TailwindCSS with 3 different methods. You can add classes with placeholder: modifer in input elements. The second method is to use a custom class that you can define in the TailwindCSS input file. The 3rd method is helpful if you want to change the style of all the placeholders of an input type in your app. For more information, read the official docs of TailwindCSS.




Latest articles

Related articles