Effects

Opacity

Utilities for sets the transparency of an element.


Class

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

Usage

<!-- Example -->
<y class="opacity-50 ... bg-white h-32 w-32"></y>

Customize More

// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'opacity',
//variant: 'responsive',
property: 'opacity',
modifier: (
'85': '.85',
'45': '.45'
...
)
)
)

Variant

VariantEnabledResponsive
DefaultYesYes
Dark Theme
hoverYes
group-hover
focusYes
focus-withinYes
active
visited
checked
disabled