Opacity in TailwindCSS
?? Opacity in Tailwind CSS
Tailwind provides utility classes to control the opacity (transparency) of elements easily.
Opacity Classes
| Class | CSS Equivalent | Description |
|---|---|---|
opacity-0 | opacity: 0; | Fully transparent (invisible) |
opacity-5 | opacity: 0.05; | 5% opacity |
opacity-10 | opacity: 0.1; | 10% opacity |
opacity-20 | opacity: 0.2; | 20% opacity |
opacity-25 | opacity: 0.25; | 25% opacity |
opacity-30 | opacity: 0.3; | 30% opacity |
opacity-40 | opacity: 0.4; | 40% opacity |
opacity-50 | opacity: 0.5; | 50% opacity |
opacity-60 | opacity: 0.6; | 60% opacity |
opacity-70 | opacity: 0.7; | 70% opacity |
opacity-75 | opacity: 0.75; | 75% opacity |
opacity-80 | opacity: 0.8; | 80% opacity |
opacity-90 | opacity: 0.9; | 90% opacity |
opacity-95 | opacity: 0.95; | 95% opacity |
opacity-100 | opacity: 1; | Fully opaque (default) |
Example
<img src="image.jpg" class="opacity-50" alt="Faded image" />This will render the image at 50% opacity, making it semi-transparent.
Combining with States and Responsiveness
You can change opacity on hover, focus, or different screen sizes:
<button class="opacity-75 hover:opacity-100"> Hover me (opacity changes from 75% to 100%)</button><div class="opacity-50 md:opacity-100"> 50% opacity on small screens, fully opaque on medium and up</div>Want examples combining opacity with transitions or animations?
