VSCode - EsLint warning "Classname is not a Tailwind CSS class" shown mistakenly

Question

In my vite + react + tailwind project, I get the following warning by VsCode:

However, the font-size myLarge is correctly defined in my tailwind.config.js:

module.exports = {
    content: ["./src/**/*.{ts,tsx}"],
    theme: {
        extend: {
            fontSize: {
                myLarge: "10rem",
            },
        },
    },
};

• As we can see in the screenshot, the IDE correctly recognizes the css rule for text-myLarge
• If I run npm run lint in a terminal outside of the IDE the warning is NOT shown
• The font-size is CORRECTLY applied in the app, when I view it in the browser
• I do not want to disable the "tailwindcss/no-custom-classname" rule. I just want it to be correctly applied in VsCode

Can you help me on how to fix that warning in VsCode? Are there any settings I'm missing? I've already restarted the VsCode Eslint-server and also the whole IDE. Do you have any hints on how to track down that issue?

For reference, this is my .eslintrc.js:

module.exports = {
    root: true,
    env: { browser: true, es2020: true, node: true },
    extends: [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:react-hooks/recommended",
        "prettier",
        "plugin:tailwindcss/recommended",
    ],
    ignorePatterns: ["dist"],
    parser: "@typescript-eslint/parser",
    plugins: ["react"],
    rules: {
        "tailwindcss/no-custom-classname": [
            "warn",
            {
                cssFiles: ["src/**/*.css"],
                callees: ["classnames", "clsx", "twMerge", "cn"],
            },
        ],
    },
};

Answer 1

Answering my own question. It seemed that VSCode had issues to finde the project's tailwind.config.js. Explicitly specifying the location in .eslintrc.js fixed it for me:

    settings: {
        tailwindcss: {
            config: path.join(__dirname, "./tailwind.config.js"),
        },
    },

See this github comment