Display

Utilities for controlling the opacity of an element.

Class names

Class	Description
opacity-0	opacity: 0%;
opacity-25	opacity: 25%;
opacity-50	opacity: 50%;
opacity-75	opacity: 75%;
opacity-100	opacity: 100%;

Examples

Primary

<div class="tile-sm bg-primary p-4 text-primary-foreground opacity-0">0%</div>
<div class="tile-sm bg-primary p-4 text-primary-foreground opacity-25">25%</div>
<div class="tile-sm bg-primary p-4 text-primary-foreground opacity-50">50%</div>
<div class="tile-sm bg-primary p-4 text-primary-foreground opacity-75">75%</div>
<div class="tile-sm bg-primary p-4 text-primary-foreground opacity-100">100%</div>