<alpha-value> not working

[lukasb]

I'm using Tailwind 3.3.0. I want to define foreground and background colors in CSS and use them in Tailwind with opacity modifiers.

This works:

theme: {
    extend: {
      colors: {
        bgBase: 'rgb(var(--background-rgb))',
        fgBase: 'rgb(var(--foreground-rgb))',
      }
    },
  },

then <div className="bg-bgBase z-20">

This does not work:

  bgBase: 'rgb(var(--background-rgb) / <alpha-value>)',
  fgBase: 'rgb(var(--foreground-rgb) / <alpha-value>)',

<div className="bg-bgBase z-20"> and <div className="bg-bgBase/90 z-20"> both fail to have any background at all.

[wongjn]

Seems to work in this Tailwind Play, so perhaps check you have used the modern rgb() syntax for the --background-rgb variable. Otherwise, consider providing a project that reproduces the unexpected behavior.

[lukasb]

Changing to modern rgb syntax (removing commas) fixed it, thanks.