Opacity
Below, utility classes to apply opacity property.
| Class | Properties |
|---|---|
| .opacity-0 | opacity: 0; |
| .opacity-5 | opacity: 0.05; |
| .opacity-10 | opacity: 0.1; |
| .opacity-15 | opacity: 0.15; |
| .opacity-20 | opacity: 0.2; |
| .opacity-25 | opacity: 0.25; |
| .opacity-30 | opacity: 0.3; |
| .opacity-35 | opacity: 0.35; |
| .opacity-40 | opacity: 0.4; |
| .opacity-45 | opacity: 0.45; |
| .opacity-50 | opacity: 0.5; |
| .opacity-55 | opacity: 0.55; |
| .opacity-60 | opacity: 0.6; |
| .opacity-65 | opacity: 0.65; |
| .opacity-70 | opacity: 0.7; |
| .opacity-75 | opacity: 0.75; |
| .opacity-80 | opacity: 0.8; |
| .opacity-85 | opacity: 0.85; |
| .opacity-90 | opacity: 0.9; |
| .opacity-95 | opacity: 0.95; |
| .opacity-100 | opacity: 1; |
Example(s)
html
<div class="opacity-0 ..."></div>
<div class="opacity-25 ..."></div>
<div class="opacity-50 ..."></div>
<div class="opacity-75 ..."></div>
<div class="opacity-100 ..."></div>Pseudo Classes
opacity is supported by changing state on-the-fly! You can use it like this:
html
<button class="opacity-75 hover:opacity-100 focus:opacity-100 disabled:opacity-50">...</button>