Tailwind custom theme color opacity not being applied - frontend

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

Answer 2

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.
Edit: as suggested by Ed Lucas, from Tailwind 3.1 on you can use a different approach.