Placeholder opacity

Class reference

# 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.