Utilities for controlling the opacity of an element.

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.


By default, no responsive or hover-state variants are generated for opacity utilities.


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: (
  // ...


To include hover-state variants like .hover:opacity-50, add "opacity-50" to the $hover-variants variable:

$hover-variants: (
  // ...

Questions or feedback about this article? Let us know