Placeholder opacity

Utilities for controlling the opacity of an element's placeholder color


Class reference

ClassProperties
placeholder-opacity-0::placeholder--tw-placeholder-opacity: 0
Aa
placeholder-opacity-5::placeholder--tw-placeholder-opacity: 0.05
Aa
placeholder-opacity-10::placeholder--tw-placeholder-opacity: 0.1
Aa
placeholder-opacity-15::placeholder--tw-placeholder-opacity: 0.15
Aa
placeholder-opacity-20::placeholder--tw-placeholder-opacity: 0.2
Aa
placeholder-opacity-25::placeholder--tw-placeholder-opacity: 0.25
Aa
placeholder-opacity-30::placeholder--tw-placeholder-opacity: 0.3
Aa
placeholder-opacity-35::placeholder--tw-placeholder-opacity: 0.35
Aa
placeholder-opacity-40::placeholder--tw-placeholder-opacity: 0.4
Aa
placeholder-opacity-45::placeholder--tw-placeholder-opacity: 0.45
Aa
placeholder-opacity-50::placeholder--tw-placeholder-opacity: 0.5
Aa
placeholder-opacity-55::placeholder--tw-placeholder-opacity: 0.55
Aa
placeholder-opacity-60::placeholder--tw-placeholder-opacity: 0.6
Aa
placeholder-opacity-65::placeholder--tw-placeholder-opacity: 0.65
Aa
placeholder-opacity-70::placeholder--tw-placeholder-opacity: 0.7
Aa
placeholder-opacity-75::placeholder--tw-placeholder-opacity: 0.75
Aa
placeholder-opacity-80::placeholder--tw-placeholder-opacity: 0.8
Aa
placeholder-opacity-85::placeholder--tw-placeholder-opacity: 0.85
Aa
placeholder-opacity-90::placeholder--tw-placeholder-opacity: 0.9
Aa
placeholder-opacity-95::placeholder--tw-placeholder-opacity: 0.95
Aa
placeholder-opacity-100::placeholder--tw-placeholder-opacity: 1
Aa

# Usage

Control the opacity of an element’s placeholder color using the .placeholder-opacity-{amount} utilities.

<input class="placeholder-gray-500 placeholder-opacity-100 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-75 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-50 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-25 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-0 ..." placeholder="jane@example.com">

# Responsive

To control an element’s placeholder color opacity at a specific breakpoint, add a {screen}: prefix to any existing placeholder color opacity utility. For example, use md:placeholder-opacity-50 to apply the placeholder-opacity-50 utility at only medium screen sizes and above.

<input class="placeholder-gray-500 placeholder-opacity-75 **md:placeholder-opacity-50** ..." placeholder="jane@example.com">

For more information about Elements’ responsive design features, check out the Responsive Design documentation.