Custom Opacity Values in Tailwind Config

Custom Opacity Values

Tailwind ships with a standard set of opacity values (0, 5, 10, 20, 25, ..., 100). If your design system requires non-standard opacities, you can extend them.

Adding Custom Opacities

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      opacity: {
        "15": "0.15",
        "35": "0.35",
        "85": "0.85",
        "98": "0.98",
      },
    },
  },
};

This gives you classes like opacity-15, bg-black/15, text-white/85, etc.

Using Arbitrary Opacities with Color

In Tailwind v3+, the slash syntax lets you apply opacity directly to colors:

<div class="bg-blue-500/15">
  15% opacity blue background
</div>

Custom opacity values extend this pattern so bg-brand/15 works with your custom colors too.

Controlling Background vs Text Opacity

You might want different default opacities for backgrounds versus text:

theme: {
  extend: {
    backgroundColor: ({ theme }) => ({
      "glass": theme("colors.white") + "1a", // ~10% opacity
    }),
  },
}

When to Extend vs Override

If you extend opacity, the defaults remain available alongside your custom values. Overriding means only your defined values exist, which could break classes that rely on the standard scale.