Custom colors are not recognized when they are declared as functions

Describe the bug In TailwindCSS colors in the theme can also be defined as functions. In my project it looks like this:

const tailwindColors = {
  transparent: 'transparent',
  current: 'currentColor',
};

for (const [key, item] of Object.entries(colorsWithDefaults)) {
  const { hue, sat, light } = item.hsla;
  const value = `${hue} ${sat || '100'}% ${light || '100'}%`;
  tailwindColors[key] = ({ opacityVariable, opacityValue }) => {
    if (opacityValue !== undefined) {
      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
      return `hsla(var(--${item.name}, ${value}) / ${opacityValue})`;
    } else if (opacityVariable !== undefined) {
      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
      return `hsla(var(--${item.name}, ${value}) / var(${opacityVariable}, 1))`;
    }
    return `hsl(var(--${item.name}, ${value}))`;
  };
}

module.exports = tailwindColors;

These gets included in tailwind.config.js like this:

const tailwindColors = require('./src/theming/tailwindColors.cjs');
const constants = require('./src/theming/constants.cjs');

module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: tailwindColors,
      cursor: {
        

These colors are all flagged as invalid custom classnames.

I think a fix is easy, I tried it already locally by patching lib\util\groupMethods.js in my node_modules folder:

        if (typeof color === 'string' || typeof color === 'function') {
          options.push(escapeSpecialChars(k) + opacitySuffixes);
        } else {

I just added typeof color === ‘function’, this seemed to work fine for me

[francoismassart]

I made a demo base on adam’s demo https://play.tailwindcss.com/EtWivxBTHl

[gunters63]

@francoismassart : Sorry, I just got to try out the new release. Works perfectly now! Thank you.