Tailwind CSS Placeholder Opacity - GeeksforGeeks

Tailwind CSS Placeholder Opacity

Last Updated : 3 Nov, 2026

Tailwind CSS provides utility classes to control the opacity of placeholder text in input fields and text areas. In Tailwind CSS v4, you can adjust placeholder opacity using opacity modifiers with placeholder color utilities. This is an alternative to setting the opacity of placeholder text using custom CSS.

Syntax

<element class="placeholder-{color}/{opacity}">...</element>

Here, {color} specifies the placeholder text color, and {opacity} specifies its opacity as a percentage.

Examples of placeholder opacity:

  • placeholder-green-800/100: Displays the placeholder color at 100% opacity.
  • placeholder-green-800/75: Displays the placeholder color at 75% opacity.
  • placeholder-green-800/50: Displays the placeholder color at 50% opacity.
  • placeholder-green-800/25: Displays the placeholder color at 25% opacity.
  • placeholder-green-800/0: Makes the placeholder text fully transparent.

Tailwind CSS v4 also supports custom opacity values using arbitrary values, such as placeholder-green-800/[.35].

Note: The older placeholder-opacity-* utilities are not supported in Tailwind CSS v4. Use opacity modifiers with placeholder color utilities instead.

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 Opacity</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="p-6 bg-gray-100">
    <h1 class="text-green-700 text-3xl font-bold mb-2">
        GeeksforGeeks
    </h1>

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

    <div class="max-w-md space-y-3">
        <input
            class="w-full p-3 rounded-lg border-2 border-green-400 bg-white placeholder-green-800/100"
            placeholder="100% opacity"
        >

        <input
            class="w-full p-3 rounded-lg border-2 border-green-400 bg-white placeholder-green-800/75"
            placeholder="75% opacity"
        >

        <input
            class="w-full p-3 rounded-lg border-2 border-green-400 bg-white placeholder-green-800/50"
            placeholder="50% opacity"
        >

        <input
            class="w-full p-3 rounded-lg border-2 border-green-400 bg-white placeholder-green-800/25"
            placeholder="25% opacity"
        >

        <input
            class="w-full p-3 rounded-lg border-2 border-green-400 bg-white placeholder-green-800/0"
            placeholder="0% opacity"
        >
    </div>
</body>

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

Output: The page displays five input fields with green placeholder text at different opacity levels. The placeholder becomes progressively lighter and is invisible at 0% opacity, while the input borders and backgrounds remain visible.

Comment

Explore