Tailwind custom theme color opacity not applys in Reactjs-CodePudding

I'm Working on a Reactjs project that uses Tailwindcss as CSS framework and trying to build a custom theme with my custom colors. I defined them as CSS variables in the index.css file. But alpha values do not work for those colors. Here is the CSS 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
   }
}

And 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>)',
            }
        }
    },
}};

But when I use something like bg-skin-base-100 the alpha value does not apply. Does anybody know why it behaves like this in my Reactjs project?

CodePudding user response：

I think you are close, but you need add a function for that in your tailwind.config.js. Here is a playground from Tailwind Labs, with a function called withOpacity in the config. In your tailwind config you can call it when defining a color:

base: withOpacity('--base'),

You can see the working in this video, from around 17 minutes until the end. They also explain why you should do it this way.

Hope this helps.

CodePudding user response：

To change the opacity for a color utility class, you need append a slash and the opacity value (0-100). 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