Effects

Opacity

Utilities for sets the transparency of an element.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
opacity-100	opacity: 1	Text
opacity-75	opacity: .75	Text
opacity-50	opacity: .5	Text
opacity-25	opacity: .25	Text
opacity-0	opacity: 0	Text

Usage

opacity-100

opacity-75

opacity-50

opacity-25

opacity-0

<div class="opacity-50 ... bg-tint-granite-1 ... height-32 width-32">
...
</div>

HTML

.dummy {
  @extend
    .opacity-50,
    .bg-tint-granite-1,
    .height-32,
    .width-32;
}

SCSS