Tailwind CSS Placeholder Color - GeeksforGeeks

Tailwind CSS Placeholder Color

Last Updated : 3 Nov, 2026

Tailwind CSS provides utilities to control the color of placeholder text in input fields and text areas. These utilities use the ::placeholder pseudo-element to style the placeholder without changing the color of the text entered by the user.

Placeholder Color Classes

Tailwind CSS supports placeholder color utilities based on its color palette.

  • placeholder-transparent: Makes the placeholder text transparent.
  • placeholder-current: Uses the element's current text color for the placeholder.
  • placeholder-black: Sets the placeholder color to black.
  • placeholder-white: Sets the placeholder color to white.
  • placeholder-red-500: Sets the placeholder color to a red shade.
  • placeholder-blue-500: Sets the placeholder color to a blue shade.
  • placeholder-green-500: Sets the placeholder color to a green shade.
  • placeholder-yellow-500: Sets the placeholder color to a yellow shade.
  • placeholder-purple-500: Sets the placeholder color to a purple shade.
  • placeholder-pink-500: Sets the placeholder color to a pink shade.
  • placeholder-gray-500: Sets the placeholder color to a gray shade.
  • placeholder-indigo-500: Sets the placeholder color to an indigo shade.

You can change the color name and shade to suit your design. Tailwind CSS v4 also supports arbitrary color values, such as placeholder-[#ff5733].

Syntax

<input class="placeholder-{color}-{shade}" placeholder="Enter text">

For a custom color, use the following syntax:

<input class="placeholder-[#ff5733]" placeholder="Enter text">

Example: The following example demonstrates how to apply different placeholder colors using Tailwind CSS v4.

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Placeholder Color</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="p-6">
    <h1 class="text-3xl font-bold text-green-600 mb-4">
        GeeksforGeeks
    </h1>

    <h2 class="text-xl font-semibold mb-4">
        Tailwind CSS Placeholder Color
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-xl">
        <input type="text" placeholder="Gray placeholder"
            class="border border-gray-400 rounded-lg p-3 placeholder-gray-500">

        <input type="text" placeholder="Red placeholder"
            class="border border-gray-400 rounded-lg p-3 placeholder-red-500">

        <input type="text" placeholder="Blue placeholder"
            class="border border-gray-400 rounded-lg p-3 placeholder-blue-500">

        <input type="text" placeholder="Green placeholder"
            class="border border-gray-400 rounded-lg p-3 placeholder-green-500">

        <input type="text" placeholder="Purple placeholder"
            class="border border-gray-400 rounded-lg p-3 placeholder-purple-500">

        <input type="text" placeholder="Pink placeholder"
            class="border border-gray-400 rounded-lg p-3 placeholder-pink-500">

        <input type="text" placeholder="Black placeholder"
            class="border border-gray-400 rounded-lg p-3 placeholder-black">

        <input type="text" placeholder="Custom color placeholder"
            class="border border-gray-400 rounded-lg p-3 placeholder-[#ff5733]">
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The page displays eight input fields in a responsive grid. Each field has a different placeholder color, demonstrating how Tailwind CSS placeholder color utilities work.

Comment

Explore