How to change Tailwind's color format?

Let's assume the following tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        black: '#000000'
      }
    }
  }
};

When compiling my app, Tailwind generates the following class for whatever color utility used in the project:

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

This works on newer browsers, but I'm stuck with a strange requirement where I have to support older browsers (from like 2015), and this notation wasn't supported back then.

Is there a way to tell Tailwind to generate colors as rbga instead?

Maybe something like:

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1));
}

Solution

TailwindCSS v3 with legacy JavaScript-based configuration

First, the color is defined in the @layer base { :root { ... } }, so TailwindCSS will automatically add the dynamic opacity variable when you use the variable in the JS configuration, where you need to pass the definition as a string.

Using CSS variables - TailwindCSS v3 Docs

tailwind.config = {
  theme: {
    extend: {
      colors: {
        rgbaexample: 'rgba(var(--color-rgbaexample))',
        hslexample: 'hsl(var(--color-hslexample))',
      }
    }
  }
}

<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer base {
  :root {
    --color-rgbaexample: 100, 200, 300;
    --color-hslexample: 333deg 100% 73%;
  }
}
</style>

<div class="text-rgbaexample">rgba() example</div>
<div class="text-hslexample">hsl() example</div>

<div class="text-rgbaexample/50">rgba() .50 opacity with /50 syntax</div>
<div class="text-hslexample/50">hsl() .50 opacity with /50 syntax</div>

You can also store the color directly in the JS file, like this:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        rgbaexample: 'rgba(100, 200, 300)',
        hslexample: 'hsl(333deg 100% 73%)',
      }
    }
  },
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="text-rgbaexample">rgba() example</div>
<div class="text-hslexample">hsl() example</div>

<div class="text-rgbaexample/50">rgba() .50 opacity with /50 syntax</div>
<div class="text-hslexample/50">hsl() .50 opacity with /50 syntax</div>

Generated native CSS:

.text-rgbaexample {
  --tw-text-opacity: 1;
  color: rgba(100, 200, 300, var(--tw-text-opacity, 1));
}
.text-hslexample {
  --tw-text-opacity: 1;
  color: hsl(333deg 100% 73% / var(--tw-text-opacity, 1));
}

TailwindCSS v4 with CSS-first configuration

The JS configuration has been removed from the process, so now directly declaring the color within @theme will automatically generate the necessary classes for you.

@theme directive - TailwindCSS v4 Docs

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
  --color-rgbaexample: rgba(100, 200, 300, 1);
  --color-hslexample: hsl(333deg 100% 73% / 1);
}
</style>

<div class="text-rgbaexample">rgba() example</div>
<div class="text-hslexample">hsl() example</div>

<div class="text-rgbaexample/50">rgba() .50 opacity with /50 syntax</div>
<div class="text-hslexample/50">hsl() .50 opacity with /50 syntax</div>