reactjsvisual-studio-codetailwind-csseslintvite

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


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

VsCode Screenshot

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

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

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"],
            },
        ],
    },
};

Solution

  • 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