Opacity

Utilities for controlling the CSS opacity property.

Classes

Class

opacity

op-0

0 (fully transparent)

op-1

0.1

op-2

0.2

op-3

0.3

op-4

0.4

op-5

0.5 (semi-transparent)

op-6

0.6

op-7

0.7

op-8

0.8

op-9

0.9

op-10

1.0 (fully opaque)

Hover states

Class

Effect

hover:op-0

opacity: 0 on hover

hover:op-1

opacity: 0.1 on hover

…

…

hover:op-10

opacity: 1 on hover

Examples

<!-- Semi-transparent overlay -->
<div class="op-5 bg-black">Semi-transparent background</div>

<!-- Disabled appearance -->
<button class="op-4" disabled>Unavailable</button>

<!-- Hover effect -->
<img class="op-10 hover:op-7" src="photo.jpg" alt="photo" />

<!-- Fade in on hover -->
<div class="op-0 hover:op-10" style="transition: opacity 0.3s">
  Appears on hover
</div>