[BUG] Conflict between Next.js `lint` and VSCode errors

[EliasVal]

Describe the bug There's a conflict between VSCode/ESlint reporting the error in the editor (Editor reports as OK) and next lint (reports tailwindcss/classnames-order

To Reproduce Steps to reproduce the behavior:

1. Configure tailwindcss/classnames-order to error
2. See what your editor reports for ESlint
3. Run next lint to check for errors
4. See error

Expected behavior Parity between Editor and next lint

Screenshots If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: Win 11
• Softwares + version used:
  • VSCode v1.91.0
  • Node.js v20.12.2
  • Next.js v15.0.0-canary.53
  • eslint-plugin-tailwindcss v3.17.4

Additional context

THIS PROJECT IS A MONOREPO!!

Original Line (OK by VSCode):

<ul
  className={`hover:bg-lightest-gray w-full rounded-full ${htmlDir === 'rtl' ? 'rounded-l-none' : 'rounded-r-none'} hover:bg-lightest-gray`}
>

Suggested fix (By next lint)

<ul
  className={`w-full rounded-full hover:bg-lightest-gray ${htmlDir === 'rtl' ? 'rounded-l-none' : 'rounded-r-none'} hover:bg-lightest-gray`}
>

eslint config file or live demo

/* configs/eslint-config-custom/index.js */
/* (simplified) */
module.exports = {
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    "simple-import-sort",
    "jsx-a11y",
    "@next/eslint-plugin-next",
    "@stylistic",
    "unused-imports",
    "eslint-plugin-react-compiler"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "../../tsconfig.json"
  },
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@next/next/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:tailwindcss/recommended",
    "plugin:deprecation/recommended"
  ],
  "rules": {
    "tailwindcss/no-custom-classname": "off",
    "tailwindcss/classnames-order": "error",
  }
}

/* apps/web/.eslintrc.json */
{
  "root": true,
  "extends": ["custom"],
  "settings": {
    "next": {
      "rootDir": "./"
    }
  },
  "parserOptions": {
    "project": true
  }
}

[gabrielzevedo]

This suggestion worked for me

[EliasVal]

This suggestion worked for me

While this suggestion didn't exactly work for me, it did lead me to find this, which fixed my issue. Thanks a lot!

[EliasVal]

Well, I have to re-open the issue since now the plain ESLint CLI disagrees with VSCode and Next.js lint

Why am I also using the ESLint CLI? Monorepo root script

EDIT: I've also tried explicitly setting the tailwindcss.config option in the root .eslintrc.cjs file

[EliasVal]

Managed to fix the issue with this solution!

Added this to the config:

  settings: {
    tailwindcss: {
      config: path.join(__dirname, 'configs/tailwind-config/index.js'),
    }
  }