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.
|
3 |
<input type="text" placeholder="Custom Style" class="px-2 py-1 rounded-md placeholder:text-blue-500 placeholder:font-bold"> |
The above example will look like the below screenshot when run.
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
@tailwind base; @tailwind components; @tailwind utilities; .custom-placeholder::placeholder{ @apply font-thin text-black italic } |
Using the class in HTML.
|
1 2 3 4 5 |
<input type="text" placeholder="Custom Style" class="px-2 py-1 rounded-md custom-placeholder "> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@tailwind base; @tailwind components; @tailwind utilities; @layer base{ input[type="text"]::placeholder{ @apply font-thin text-black italic } } |
Conclusion
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.