VSCode中ESLint误报「Classname is not a Tailwind CSS class」警告求助

在Vite + React + Tailwind项目中，VSCode弹出ESLint警告，提示text-myLarge是未定义的自定义类名，但该字体尺寸类已经在tailwind.config.js中正确配置：

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

当前已知情况：

• IDE能正确识别text-myLarge的CSS规则
• 终端执行npm run lint无此警告
• 浏览器中该字体样式已正确生效
• 不想禁用tailwindcss/no-custom-classname规则，仅希望VSCode能正确识别自定义类

已尝试重启VSCode ESLint服务和IDE，仍未解决，以下是排查思路和解决方法，附当前.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"],
            },
        ],
    },
};

排查与解决步骤 #

1. 显式指定Tailwind配置文件路径 #

ESLint的Tailwind插件可能未自动找到tailwind.config.js，需在ESLint规则中显式声明路径。修改.eslintrc.js中的tailwindcss/no-custom-classname配置：

"tailwindcss/no-custom-classname": [
    "warn",
    {
        cssFiles: ["src/**/*.css"],
        callees: ["classnames", "clsx", "twMerge", "cn"],
        config: "./tailwind.config.js" // 新增该行，指向你的配置文件
    },
],

修改后重启ESLint服务（命令面板执行「ESLint: Restart ESLint Server」）。

2. 验证插件与Tailwind版本兼容性 #

确保eslint-plugin-tailwindcss版本与Tailwind CSS版本匹配，Tailwind v3需要插件v3及以上版本。执行以下命令查看版本：

npm list eslint-plugin-tailwindcss tailwindcss

若版本不兼容，升级插件：

npm install eslint-plugin-tailwindcss@latest --save-dev

3. 清理VSCode缓存 #

VSCode缓存可能导致识别异常，执行：

• 打开命令面板（Ctrl+Shift+P / Cmd+Shift+P）
• 选择「Developer: Reload Window」
• 若仍无效，可手动删除VSCode缓存目录（Windows：%APPDATA%\Code\Cache；Mac：~/Library/Caches/Code）

4. 检查VSCode工作区ESLint配置 #

打开.vscode/settings.json，确保ESLint验证包含所有用到的文件类型，并启用Tailwind插件：

{
    "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
    "eslint.plugin.tailwindcss.enabled": true
}

5. 确认Tailwind的content扫描范围 #

检查tailwind.config.js的content数组是否覆盖了所有使用text-myLarge的文件，比如如果有.jsx文件，需更新为：

content: ["./src/**/*.{ts,tsx,js,jsx}"],

确保Tailwind能扫描到类的使用，让ESLint插件正确识别自定义类。

内容的提问来源于stack exchange，提问作者Giraphi