Tailwind CSS - Opacity

Tailwind CSS: Mastering Opacity

The opacity utility in Tailwind CSS allows you to control the transparency of any element. It’s a fundamental tool for styling UI states like hover effects, focus indicators, disabled elements, and for creating depth by layering elements.

Modern Development Note: While the examples here are self-contained for simplicity, a modern Tailwind CSS setup uses a build tool like Vite or Next.js and a tailwind.config.js file. The Just-In-Time (JIT) engine, now default in Tailwind CSS v3+, automatically generates only the CSS you use, resulting in highly optimized production builds.

Core Opacity Utilities

Tailwind provides a comprehensive set of opacity classes out of the box, ranging from opacity-0 (completely transparent) to opacity-100 (fully opaque). Here is a list of the default utilities:

Class	CSS Properties
opacity-0	opacity: 0;
opacity-5	opacity: 0.05;
opacity-10	opacity: 0.1;
opacity-20	opacity: 0.2;
opacity-25	opacity: 0.25;
opacity-30	opacity: 0.3;
opacity-40	opacity: 0.4;
opacity-50	opacity: 0.5;
opacity-60	opacity: 0.6;
opacity-75	opacity: 0.75;
opacity-80	opacity: 0.8;
opacity-90	opacity: 0.9;
opacity-95	opacity: 0.95;
opacity-100	opacity: 1;

Arbitrary Values: For custom opacity values, you can use square bracket notation, like opacity-[.42] which compiles to opacity: 0.42;. This is a powerful feature of Tailwind’s JIT engine.

Interactive and Responsive Opacity

Opacity utilities can be applied conditionally using state variants like hover:, focus:, disabled:, and responsive breakpoints like md: or lg:. This is essential for creating dynamic and accessible user interfaces.

Example: Interactive Button States

This example demonstrates how to use opacity to style different states of a button, including a disabled state that is both visually and functionally inert.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Opacity Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 dark:bg-slate-900 flex items-center justify-center min-h-screen">

  <div class="p-8 space-y-4">
    <!-- Default button with hover effect -->
    <button class="px-6 py-3 font-semibold text-white bg-indigo-600 rounded-lg shadow-md hover:opacity-80 transition-opacity duration-300">
      Hover Me
    </button>

    <!-- Disabled button with accessibility attributes -->
    <button
      disabled
      class="px-6 py-3 font-semibold text-white bg-indigo-600 rounded-lg shadow-md opacity-50 cursor-not-allowed"
      aria-disabled="true">
      Disabled
    </button>
  </div>

</body>
</html>

Practical Applications & Best Practices

Modal Overlays: Use a semi-transparent opacity on a background div to dim the page content behind a modal (e.g., bg-black opacity-50).
Image Overlays: Place a div with a background color and partial opacity over an image to create text contrast.
Fading In/Out: Combine opacity with transition utilities (transition-opacity, duration-500) for smooth fade effects.

When using opacity to signify a disabled state, it is crucial to also add attributes that programmatically disable the element. Low opacity alone is not sufficient for screen readers.

For buttons: Use the disabled attribute.
For links or custom components: Use aria-disabled="true" and pointer-events-none to prevent clicks.

Customizing Your Theme

You can add your own opacity values to the theme by editing the opacity scale in your tailwind.config.js file.

module.exports = {
  theme: {
    extend: {
      opacity: {
        '15': '0.15',
        '35': '0.35',
        '65': '0.65',
      }
    }
  }
}