Tailwind custom theme color opacity not being applied

Question

I'm working on a Reactjs project that uses Tailwind CSS as my CSS framework and I'm trying to build a theme with custom colors.

I defined the colors as CSS variables in the index.css file, but setting alpha values does not work for those colors.

Here is the CSS for my color values:

  @layer base {
    :root {
        --base: 26 27 27;
        --light: 43 43 43;
        --lighter: 81 81 81;
        --text-base: 235 235 235;
        --text-inverted: 71 72 72;
        --color-primary: 241 218 19;
        --color-primary-light: 245 226 66;
        --color-danger: 243 75 19;
        --color-danger-light: 245 111 66;
        --color-accent: 242 142 19;
        --color-accent-light: 245 165 66;
        --color-secondary: 235 235 235
       }
    }

I configured a custom theme in the tailwind.config.js file like below:

 module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
        extend: {
            colors: {
                skin: {
                    base: 'rgb(var(--base) / <alpha-value>)',
                    light: 'rgb(var(--light) / <alpha-value>)',
                    primary:'rgb(var(--color-primary) / <alpha-value>)',
                    lprimary: 'rgb(var(--color-primary-light) / <alpha-value>)',
                    danger: 'rgb(var(--color-danger) / <alpha-value>)',
                    dangerLight: 'rgb(var(--color-danger-light) / <alpha-value>)',
                    accent: 'rgb(var(--color-accent) / <alpha-value>)',
                    laccent: 'rgb(var(--color-accent-light) / <alpha-value>)',
                    secondary: 'rgb(var(--color-secondary) / <alpha-value>)'
                }
            },
            backgroundColor: {
                skin: {
                    base: 'rgb(var(--base) / <alpha-value>)',
                    light: 'rgb(var(--light) / <alpha-value>)',
                    primary:'rgb(var(--color-primary) / <alpha-value>)',
                    lprimary: 'rgb(var(--color-primary-light) / <alpha-value>)',
                    danger: 'rgb(var(--color-danger) / <alpha-value>)',
                    ldanger:'rgb(var(--color-danger-light) / <alpha-value>)',
                    secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
                    accent: 'rgb(var(--color-accent) / <alpha-value>)',
                    laccent: 'rgb(var(--color-accent-light) / <alpha-value>)',
                }
            },
            textColor: {
                skin: {
                    base: 'rgb(var(--text-base) / <alpha-value>)',
                    inverted: 'rgb(var(--text-inverted) / <alpha-value>)',
                    primary: 'rgb(var(--color-primary) / <alpha-value>)',
                    hover: 'rgb(var(--color-primary-light) / <alpha-value>)',
                    secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
                }
            },
            borderColor: {
                skin: {
                    primary: 'rgb(var(--color-primary) / <alpha-value>)',
                    hover: 'rgb(var(--color-primary-light) / <alpha-value>)',
                }
            }
        },
    }};

However, when I use a class like bg-skin-base-100 the alpha value is not applied.

Does anybody know why it's behaving like this?

Answer 1

To change the opacity for a color utility class, you need append a slash and the opacity value (0-100), not a dash. For instance, bg-skin-base/50 will use the opacity .5.

In your case, this would result in the CSS: color: rgb(26 27 27/.5).

Details and examples here: https://tailwindcss.com/docs/text-color#changing-the-opacity