Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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",
            },
        },
    },
};
  • 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"],
            },
        ],
    },
};
like image 612
Giraphi Avatar asked Sep 03 '25 16:09

Giraphi


1 Answers

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

like image 80
Giraphi Avatar answered Sep 05 '25 06:09

Giraphi