How to control Opacity in Tailwind?

Opacity utilities and color opacity.

What You'll Learn

Element opacity
Color opacity modifier
Backdrop opacity

Element Opacity

index.htmlHTML

<div class="opacity-0">Invisible</div>
<div class="opacity-25">25% visible</div>
<div class="opacity-50">50% visible</div>
<div class="opacity-75">75% visible</div>
<div class="opacity-100">Fully visible</div>

Color Opacity Modifier

index.htmlHTML

<div class="bg-blue-500/50">50% opacity background</div>
<div class="text-black/75">75% opacity text</div>
<div class="border-red-500/25">25% opacity border</div>

Hover Opacity

index.htmlHTML

<button class="opacity-75 hover:opacity-100 transition">
  More visible on hover
</button>

Backdrop Filter

index.htmlHTML

<div class="backdrop-blur-sm bg-white/30">
  Frosted glass effect
</div>

How to use Transforms in Tailwind?

How to handle Overflow in Tailwind?