[BUG] Error while loading rule 'tailwindcss/no-custom-classname'

[mafikes]

Describe the bug I updated eslint-plugin-tailwindcss to the latest version and getting error below:

Internal server error: Error while loading rule 'tailwindcss/no-custom-classname': <css input>:43:22: Unknown word

To disable no-custom-classname without change or help. I need to disable all plugin to finish my build process.

To Reproduce npm run lint

Environment:

• Ventura 13.3 macOS
• npm 9.4.0
• node v19.6.1
• eslint-plugin-tailwindcss 3.11.0
• eslint ^8.34.0
• prettier ^2.8.4

eslint config file I use default eslint setup from tailwindcss as "warn"

// .eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:vue/vue3-recommended",
    "plugin:tailwindcss/recommended",
    "prettier",
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    parser: "@typescript-eslint/parser",
  },
  plugins: ["unused-imports", "vue", "@typescript-eslint"],
  rules: {
    "vue/component-tags-order": [
      "error",
      {
        order: ["script", "template", "style"],
      },
    ],
    "vue/multi-word-component-names": "off",
    "vue/component-api-style": ["error", ["script-setup", "composition"]],
    "vue/component-name-in-template-casing": "error",
    "vue/block-lang": [
      "error",
      {
        script: { lang: "ts" },
      },
    ],
    "vue/define-macros-order": [
      "warn",
      {
        order: ["defineProps", "defineEmits"],
      },
    ],
    "vue/define-emits-declaration": ["error", "type-based"],
    "vue/define-props-declaration": ["error", "type-based"],
    "vue/match-component-import-name": "error",
    "vue/no-ref-object-destructure": "error",
    "vue/no-unused-refs": "error",
    "vue/no-useless-v-bind": "error",
    "vue/padding-line-between-tags": "warn",
    "vue/prefer-separate-static-class": "error",
    "vue/prefer-true-attribute-shorthand": "error",
    "vue/no-v-html": "off",
    "vue/no-v-text-v-html-on-component": "off",

    "no-undef": "off",
    "no-unused-vars": "off",
    "no-console": ["warn"],
  },
  ignorePatterns: ["*.d.ts"],
}

[mafikes]

I fix this issue with adding cssFiles strictly to the no-custom-classname rule.

It was working fine before update.

// .eslintrc.js
"tailwindcss/no-custom-classname": ["warn", {
  cssFiles: [
    "resources/css/app.css",
    "resources/css/editor.css",
    "resources/css/font-delivery.css"
  ]
}],

[francoismassart]

Hi @mafikes Can you share a demo repo so that I can take a look at it ?

[Bosphoramus]

Happening to me too

[akegvd]

It happened to me too. But I can fix that.

In my case I use .scss and it has the code comment start with // some comment (double slash), when I remove It or replace it with /* some comment */ and rerun eslint, it's back to work.

in my main.scss file

❌Bad
// components
@import "./components/button";

✅ Good
/** components */
@import "./components/button";

[paix26875]

It happened to me too.

[Livijn]

Got the same error but I want to enable custom classes so I just disabled the error: "tailwindcss/no-custom-classname": "off"

[mirite]

No clue why, but simply having the cssFiles parameter present fixed it for me. The problem seemed to start after switching to the flat config. This works and is still checking the tsx files.

    ...compat.config({
        plugins: ["eslint-plugin-tailwindcss"],
        extends: ["plugin:tailwindcss/recommended"],
        rules: {
            "tailwindcss/classnames-order": "off",
            "tailwindcss/no-custom-classname": [
                "warn",
                {
                    callees: ["twMerge"],
                    cssFiles: [],
                },
            ],
        },
    }),