Text opacity

Class reference

# Usage

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

<p class="text-violet-600 text-opacity-100 ...">The quick brown fox ...</p>
<p class="text-violet-600 text-opacity-75 ...">The quick brown fox ...</p>
<p class="text-violet-600 text-opacity-50 ...">The quick brown fox ...</p>
<p class="text-violet-600 text-opacity-25 ...">The quick brown fox ...</p>
<p class="text-violet-600 text-opacity-0 ...">The quick brown fox ...</p>

Note that because these utilities are implemented using CSS custom properties, a .text-{color} utility must be present on the same element for them to work.

<div class="text-black">
  <div class="text-opacity-50">...</div>
</div>

<div class="text-black">
  <div class="text-black text-opacity-50">...</div>
</div>

# Responsive

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

<div class="text-blue-500 text-opacity-75 md:text-opacity-50">
  <!-- ... -->
</div>

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