Tailwind CSS Opacity

Tailwind CSS provides opacity utility classes, which allows you to set opacity to an element or its child element. In this guide, we will learn about the opacity utility class in Tailwind CSS.

Syntax

The syntax for using the Tailwind CSS opacity utility class is:

<div class="opacity-{value}">...</div>

Here, {value} is a number ranging from 0 to 100, where 0 means completely transparent, and 100 means opaque.

Example

<div class="bg-gray-900 text-white p-4 opacity-50">
  <p>This is a semi-transparent text.</p>
</div>

In the above example, we have applied the opacity-50 class to the div element to make it semi-transparent.

Output

The above example will produce the following output:

Explanation

The opacity property sets the opacity level for an element or its child elements. An opacity value of 1 is opaque, which means the element is fully visible. On the other hand, an opacity value of 0 is transparent, which means the element is not visible.

Tailwind CSS provides opacity utility classes that allows you to easily set the opacity of an element.

Use

You can use opacity utility classes in Tailwind CSS to make an element or its child elements semi-transparent or fully transparent. You can apply opacity utility classes to any element such as text, borders, background colors, and images.

Important Points

• The opacity utility class can be applied to any Tailwind CSS utility class to adjust element opacity.
• The opacity value range starts from 0 (fully transparent) and ends at 100 (fully opaque).
• The opacity utility class is used for creating text overlays, image overlays, and overall dimming of an element's content.

Summary

The Tailwind CSS opacity utility class allows you to set the opacity of an element or its child element. You can set the opacity to any value ranging from 0 to 100, which allows you to make an element fully transparent or fully opaque. The opacity utility class can be used to create an overlay effect, dimming effect, or to highlight specific content on a web page.