Do you mind sharing your current .eslintrc.js file?

I just fixed a similar issue and this worked for me:

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

I can confirm @Gomah 's solution works.

Do you mind sharing your current .eslintrc.js file?

I just fixed a similar issue and this worked for me:

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

It's fairly simple:

{
  "env": {
    "browser": true,
    "jest": true,
    "node": false
  },
  "plugins": [
    "tailwindcss"
  ],
  "rules": {
    "tailwindcss/classnames-order": [
      "error"
    ],
    "tailwindcss/enforces-negative-arbitrary-values": [
      "error"
    ],
    "tailwindcss/enforces-shorthand": [
      "error"
    ],
    "tailwindcss/migration-from-tailwind-2": [
      "error"
    ],
    "tailwindcss/no-arbitrary-value": [
      "off"
    ],
    "tailwindcss/no-contradicting-classname": [
      "error"
    ],
    "tailwindcss/no-custom-classname": [
      "error",
    ]
  },
  "settings": {
    "tailwindcss": {
      "callees": [
        "cn"
      ],
      "config": "tailwind-config.js"
    }
  }
}

In fact I can't use the workaround, since I use a JSON config.

@quesabe did your commit provide a solution for your issue with JSON config ?
@Gomah , @av-erencelik & @quesabe Can we close this issue ? It looks like you found a workaround...

@quesabe did your commit provide a solution for your issue with JSON config ?
@Gomah , @av-erencelik & @quesabe Can we close this issue ? It looks like you found a workaround...

@francoismassart
Actually no, the commit does not solve the current issue completely. It helps in my case, where I can get rid of the custom config. But if anybody needs to use a json eslint config, refer to a custom tailwind config, and all this done not in the root folder of a project, then it still won't load the tailwind config properly.

However I'm not sure if it has a solution within the plugin repo - maybe it's a problem with eslint itself.

After doing some digging, it looks like the vscode-eslint extension is not passing the context object to the rules when running from a higher level folder. You can confirm this yourself by being in your root project folder and running npx eslint ./your-package where your-package is where the eslint and tailwind config files are and it will lint the whole project without issue.

Apparently the solution is the eslint.workingDirectories setting in the workspace .vscode/settings.json. The following config should fix the problem.

// .vscode/settings.json
{
  "eslint.workingDirectories": ["./your-package"],
}

@lachieh Your suggested workaround with custom .vscode/settings.json wouldn't be practical for teams working on same monorepo, since custom vscode settings do not normally belong to codebase committed to git.

@lachieh Your suggested workaround with custom .vscode/settings.json wouldn't be practical for teams working on same monorepo, since custom vscode settings do not normally belong to codebase committed to git.

@maslennikov I didn't actually say that this file should be committed. I just provided a solution for correctly configuring the eslint extension.

Whether it is practical or not is subjective and committing this file is a team decision. If your team has decided that shared workspace settings should actually not be shared, then perhaps you can find and suggest a different solution instead of just spreading your (unsolicited) opinion.

For example, a common pattern is to add the .vscode/settings.json file in .gitignore but include shared settings in a .vscode/settings.default.json so that developers can copy required settings and customize the settings themselves.

Gomah thanks for the suggestion! Works 🚀

@quesabe Thank you for the solution! It was working for me

I was also facing this problem in a Monorepo environment using Turborepo, but I tried the contents of microsoft/vscode-eslint#1706 (comment) I tried the contents of and it worked fine.

I think the only way to solve this reliably is by searching for the config based on the location of the file that is being linted.
Similar to what typescript-eslint is doing now, see: https://typescript-eslint.io/blog/parser-options-project-true/#introducing-true

Do you mind sharing your current .eslintrc.js file?

I just fixed a similar issue and this worked for me:

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

it works in monorepo thank you soo much!!

Do you mind sharing your current .eslintrc.js file?

I just fixed a similar issue and this worked for me:

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

This works but I'm not using a monorepo. I'm using the base Vite template from pnpm create vite.

This worked for me when my pnpm lint script was complaining that __dirname is not defined in ES module scope

  tailwindcss: {
    config: path.join(import.meta.dirname, 'tailwind.config.js'),
  }

After trying some suggestions I found that vs code eslint run can be detected by checking if it is started from root dir

const isVsEslintRun = !process.env.PWD.includes("/apps/");

Then in specific package setup after adding below it works for VsEslint and when running script command turbo lint as turbo runs it from specific apps directories

{
    files: ["apps/web/**/*.{ts,tsx,mts,cts,js,jsx}"],
    settings: {
      tailwindcss: {
        config: isVsEslintRun ? "./apps/web/tailwind.config.ts" : undefined,
      },
    },
  },

Just for people landing here who have a *.json eslint configuration and are working with a monorepo tool like Nx and wonder how to get this working.

In my case I resolved it by referencing the tailwind-preset library in the monorepo top-level file .eslintrc.json.
I still have an issue with the configuration of the IntelliJ EsLint plugin but for the command execution it looks fine.
This section in my top-level file looks like this:

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nx"],
  "settings": {
    "tailwindcss": {
      "config": "./libs/tailwind-preset/tailwind.config.js"
    }
  },
...
}