[BUG] Cannot resolve default tailwindcss config path. Please manually set the config option.

[flomSStaar]

Describe the bug
When i am running pnpm eslint, I am facing to the many warning message Cannot resolve default tailwindcss config path. Please manually set the config option. in my console.

To Reproduce
Steps to reproduce the behavior:

Dependencies:

• eslint : ^9
• eslint-plugin-tailwindcss : ^4.0.0-beta.0
• tailwindcss : ^4

here is my eslint.config.mjs :

import { defineConfig, globalIgnores } from 'eslint/config'
import next from 'eslint-config-next'
import nextVitals from 'eslint-config-next/core-web-vitals'
import nextTs from 'eslint-config-next/typescript'
import prettier from 'eslint-config-prettier/flat'
import prettierPlugin from 'eslint-plugin-prettier/recommended'
import tailwindcss from 'eslint-plugin-tailwindcss'

const eslintConfig = defineConfig([
  ...next,
  ...nextVitals,
  ...nextTs,
  ...tailwindcss.configs['flat/recommended'],
  prettier,
  prettierPlugin,
  {
    rules: {
      'react/self-closing-comp': 'warn',
      'react/react-in-jsx-scope': 'off',
      'react/jsx-sort-props': 'warn',
      'tailwindcss/no-custom-classname': 'off',

      'no-restricted-imports': [
        'error',
        {
          patterns: ['../*', './*'],
        },
      ],
    },
  },
  // Override default ignores of eslint-config-next.
  globalIgnores([
    // Default ignores of eslint-config-next:
    '.next/**',
    'out/**',
    'build/**',
    'next-env.d.ts',
  ]),
])

export default eslintConfig

1. Install dependencies
2. Run pnpm eslint
3. See error

Expected behavior
No warning message.

Environment:

• OS: macOS
• Softwares + version used:
  • node 22.17.1
  • pnpm 10.13.1
  • eslint : ^9
  • eslint-plugin-tailwindcss : ^4.0.0-beta.0
  • tailwindcss : ^4

[john-wood-arondite]

FYI - I can get past this error using

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

in the eslint config - my tailwind.config.js is just empty

export default {};

As tailwind V4 - moves away from having a separate config file - I think it would accept a valid tailwind v4 config file but haven't tried

[PaulRBerg]

@john-wood-arondite's solution works but this is a really bad UX, @francoismassart any chance you could ignore the Tailwind config check in v4? It should be an easy fix.

[dolanmiu]

So my project is on a monorepo, so there are multiple styles.css (one for each app I guess)
Which one do I pick?

[dimitriBouteille]

I am also trying to implement tailwind v4, ESLint 9 and eslint-plugin-tailwindcss ^4.

When I execute the yarn eslint, I get the following error :

Error: Invalid declaration: ,
at Ce (file:PATH__/node_modules/tailwindcss/dist/chunk-MEY3PWYT.mjs:1:2658)
at Ju (file:PATH__/node_modules/tailwindcss/dist/chunk-MEY3PWYT.mjs:38:1586)
at TailwindUtils.loadConfigV4 (PATH__/node_modules/tailwind-api-utils/dist/index.cjs:399:26)
at async TailwindUtils.loadConfig (PATH__/node_modules/tailwind-api-utils/dist/index.cjs:381:7)
at async PATH__/node_modules/eslint-plugin-tailwindcss/lib/util/getTailwindConfigWorker.js:7:5
at async PATH__/node_modules/synckit/lib/index.cjs:517:14

An idea of why I have this error ?

It’s very complicated to use this plugin today with the new version of ESLint 😥

tailwind.config.js

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './contexts/**/*.{ts,tsx}',
    './HOCs/**/*.{ts,tsx}',
  ],
  corePlugins: {
    preflight: false,
  },
};

module.exports = config;

eslint.config.mjs

import { defineConfig } from 'eslint/config';
import js from '@eslint/js';
import ts from 'typescript-eslint';
import importPlugin from 'eslint-plugin-import';
import simpleImportSort from 'eslint-plugin-simple-import-sort';
import unusedImports from 'eslint-plugin-unused-imports';
import pluginNext from '@next/eslint-plugin-next';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import prettier from 'eslint-config-prettier/flat';
import globals from 'globals';
import tailwind from 'eslint-plugin-tailwindcss';
import path from 'path';


export default defineConfig([
  {
    ignores: [
      '.next',
      '.mesh',
      'dist',
      'build',
      '**/*.gql.ts',
      'next-env.d.ts',
      'generated/types.ts',
      'var',
      '.env',
    ],
  },
  js.configs.recommended,
  ts.configs.recommended,
  prettier,
  importPlugin.flatConfigs.typescript,
  ...tailwind.configs['flat/recommended'],
  {
    files: ['**/*.{ts,tsx}'],
    plugins: {
      '@next/next': pluginNext,
      react,
      'react-hooks': reactHooks,
      import: importPlugin,
      'unused-imports': unusedImports,
      'simple-import-sort': simpleImportSort,
      reflet: reflet,
    },
    rules: {
      ...pluginNext.configs.recommended.rules,
      ...pluginNext.configs['core-web-vitals'].rules,
      'no-console': ['error', { allow: ['warn', 'error'] }],
      'no-unused-vars': 'off',
      'no-constant-binary-expression': 'warn',
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
      'simple-import-sort/imports': 'error',
      'import/newline-after-import': 'error',
      'import/no-duplicates': 'error',
      'import/first': 'error',
      '@typescript-eslint/no-unused-expressions': 'off',
      '@typescript-eslint/no-empty-object-type': 'off',
      '@typescript-eslint/triple-slash-reference': 'off',
      '@typescript-eslint/no-unused-vars': [
        'error',
        {
          args: 'after-used',
          argsIgnorePattern: '^_',
        },
      ],
    },
  },
  {
    files: ['**/*.js'],
    languageOptions: {
      sourceType: 'module',
      globals: {
        ...globals.node,
      },
    },
    rules: {
      '@typescript-eslint/no-require-imports': 'off',
      'no-undef': 'off',
    },
  },
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    settings: {
      tailwindcss: {
        config: path.resolve('tailwind.config.js'),
      },
    },
  },
]);