How to style the Placeholder Text in Tailwind CSS ?

Last Updated : 09 Feb, 2024

Placeholder text in forms provides hints to the users about the purpose of that input box. TailwindCSS makes it super easy to style the placeholder text according to the user’s preferences. This article will cover various approaches for placeholder text to enhance the user experience.

Default style

<input type="text" placeholder="Enter text">

Changing the color

<input type="text" class="placeholder-blue-500" placeholder="Enter text">

Increasing the font size

<input type="text" class="text-lg" placeholder="Enter text">

Italic style

<input type="text" class="italic" placeholder="Enter text">

Changing background colour

<input type="text" class="bg-gray-100" placeholder="Enter text">

Making the font bold

<input type="text" class="font-bold" placeholder="Enter text">

Increasing spacing between text

<input type="text" class="tracking-wider" placeholder="Enter text">

Changing font style

<input type="text" class="font-serif" placeholder="Enter text">

Capitalizing text

<input type="text" class="uppercase" placeholder="Enter text">

Example: Implementation to style placeholder using multiple approaches.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <script src="https://cdn.tailwindcss.com"></script> 
    <title>Styling Placeholder</title> 
</head> 
  
<body> 
  
    <div class='p-12 flex flex-col space-y-4'> 
        <!-- Basic input with default styling -->
        <input class='border p-4' type="text" 
               placeholder='Search for Anything!' /> 
  
        <!-- Input with a custom placeholder color (pink) -->
        <input class='border p-4 placeholder-pink-600' 
               type="text" placeholder='Search for Anything!' /> 
  
        <!-- Input with custom placeholder  
             color (green) and larger font size -->
        <input class='border p-4 placeholder-green-500 text-xl' 
               type="text" placeholder='Search for Anything!' /> 
  
        <!-- Input with custom placeholder color (sky)  
             and larger font size, italic style -->
        <input class='border p-4 placeholder-sky-600 text-xl italic' 
               type="text" placeholder='Search for Anything!' /> 
  
        <!-- Input with custom placeholder color  
             (sky) and light gray background -->
        <input class='border p-4 placeholder-sky-600 bg-gray-100' 
               type="text" placeholder='Search for Anything!' /> 
  
        <!-- Input with custom placeholder  
             color (sky) and bold font -->
        <input class='border p-4 placeholder-sky-600 font-bold' 
               type="text" placeholder='Search for Anything!' /> 
  
        <!-- Input with custom placeholder color (red),  
             bold font, and wider letter spacing -->
        <input class='border p-4 placeholder-red-600 font-bold tracking-widest' 
               type="text" placeholder='Search for Anything!' /> 
  
        <!-- Input with custom placeholder  
             color (sky), serif font, and bold -->
        <input class='border p-4 placeholder-sky-600 font-serif font-bold' 
               type="text" placeholder='Search for Anything!' /> 
  
        <!-- Input with custom placeholder  
             color (yellow), uppercase text -->
        <input class='border p-4 placeholder-yellow-600 uppercase' 
               type="text" placeholder='Search for Anything!' /> 
    </div> 
  
</body> 
  
</html>