theme() with css variable colors doesn't work in .css files

[maxsalven]

What version of Tailwind CSS are you using?

v3.1.3

What build tool (or framework if it abstracts the build tool) are you using?

postcss 8.4.14

What version of Node.js are you using?

v16.13.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/eoS0xJO1cm

Describe your issue

If you use css variable for colors, then theme doesn't work in .css files:

module.exports = {
  theme: {
    colors: {
      blue: 'rgb(var(--blue) / <alpha-value>)',
    },
  },
  plugins: [],
}

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --blue: 0 0 255;
}

.custom-class {
  color: theme("colors.blue");
}

Generated css:

.custom-class {
    color: rgb(var(--blue) / <alpha-value>);
}

[thecrypticace]

Hey! Appreciate the report on this one — I've merged the fix and it'll be in our next release. Will likely tag one in the morning (Eastern US Time). The problem here was that when we didn't see an alpha we didn't try replacing the <alpha-value> placeholder. In the short term you can work around this by doing theme(colors.blue / 1) or by using our insiders build: npm install tailwindcss@insiders.