Tailwind provides opacity utilities to control how transparent an element looks. You can apply opacity to text, backgrounds, borders, shadows, and entire elements.

Use the opacity-{value} utilities to change the transparency of the whole element.

• opacity-0 - Fully transparent
• opacity-25 - 25% visible
• opacity-50 - 50% visible
• opacity-75 - 75% visible
• opacity-100 - Fully visible

Tailwind also supports slash opacity syntax on many color utilities. For example, bg-blue-500/50 gives you a blue background at 50% opacity.

Similar syntax works for text, borders, rings, shadows, and outline colors.

• Disabled or inactive UI states
• Overlay backdrops and modals
• Subtle borders and dividers
• Hover and focus transitions

Use opacity carefully so text remains readable and interactive controls stay accessible. For important text, avoid reducing opacity too much.