| Class | Properties |
|---|---|
.opacity-100 | opacity: 1; |
.opacity-75 | opacity: .75; |
.opacity-50 | opacity: .5; |
.opacity-25 | opacity: .25; |
.opacity-0 | opacity: 0; |
<div class="bg-gray-400 opacity-100"></div>
<div class="bg-gray-400 opacity-75"></div>
<div class="bg-gray-400 opacity-50"></div>
<div class="bg-gray-400 opacity-25"></div>Use .opacity-0 to make an element fully transparent.
Variants
By default, no responsive or hover-state variants are generated for opacity utilities.
Responsive
To include responsive variants like .md:opacity-50, add "opacity" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:
$responsive-variants: (
// ...
"opacity",
);
Hover-state
To include hover-state variants like .hover:opacity-50, add "opacity-50" to the $hover-variants variable:
$hover-variants: (
// ...
"opacity",
);