Custom colors are not recognized when they are declared as functions

[gunters63]

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

[gunters63]

See also here: https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo

[francoismassart]

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

[francoismassart]

I just published a beta version with the fixes listed on #132
https://github.com/francoismassart/eslint-plugin-tailwindcss/tree/fix/no-custom-classname-plugin-support#readme

npm i eslint-plugin-tailwindcss@3.6.0-beta.0

Please give it a try and provide feedback and or issues 👍
Thank you

[francoismassart]

@gunters63 did you get a chance to try out the latest beta to check it solves your issue ?

[francoismassart]

Should be fixed in the latest release 3.6.0

Make sure to:

1. Update the eslint-plugin-tailwindcss package
2. Restart your editor
3. Report any issue on this repo

[gunters63]

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