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

[glekner]

Describe the bug
I have a Vite, React project and I wanted to add Tailwind.
I'm getting the following message when adding eslint-plugin-tailwindcss.

Oops! Something went wrong! :(

ESLint: 8.28.0

CssSyntaxError: Error while loading rule 'tailwindcss/no-custom-classname': <css input>:67:1: Unexpected }
Occurred while linting .../auth/PortalRestricted.tsx at Input.error (node_modules/postcss/lib/input.js:148:16)

.eslintrc.js looks like this:

extends: ['plugin:tailwindcss/recommended']
plugins: ['graphql', 'no-only-tests', 'simple-import-sort', 'tailwindcss']

postcss.config.js

module.exports = {
  plugins: {
    // Add support for @import statements in .css files
    'postcss-import': {},
    // Add support for CSS nesting, using Tailwind's bundled nesting plugin (recommended)
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

Did anyone face this issue? Thanks

Expected behavior
Eslint should succeed

Environment (please complete the following information):

• OS: macOS
• Softwares + version used:
  VSCode, Node 16.16.0, Eslint 8.28.0, latest versions of eslint plugins

eslint config file or live demo
eslint config

module.exports = {
  root: true,
  // env: {
  //   browser: true,
  //   es6: true,
  //   node: false,
  // },
  extends: [
    'react-app',
    'airbnb',
    'airbnb-typescript',
    'plugin:react/jsx-runtime',
    'eslint:recommended',

    // 'plugin:react/recommended',
    // 'plugin:@typescript-eslint/eslint-recommended',
    // 'plugin:promise/recommended',

    'plugin:unicorn/recommended',

    // prettier must be last
    'prettier',

    // tailwind
    'plugin:tailwindcss/recommended',
  ],
  // globals: {
  //   Atomics: 'readonly',
  //   SharedArrayBuffer: 'readonly',
  // },
  // parser: '@typescript-eslint/parser',
  settings: {
    react: {
      version: 'detect', // React version. "detect" automatically picks the version you have installed.
    },
    tailwindcss: {
      callees: ['classnames', 'classNames', 'clsx', 'twMerge'],
      whitelist: ['icon'],
    },
  },
  globals: {
    cy: 'readonly',
    Cypress: 'readonly',
  },
  parserOptions: {
    project: [
      './tsconfig.json',
      './cypress/tsconfig.json',
      './tsconfig.eslint.json',
    ],
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: ['graphql', 'no-only-tests', 'simple-import-sort', 'tailwindcss'],
  // plugins: ['react', '@typescript-eslint', 'unicorn', 'promise', 'graphql'],
  overrides: [
    {
      files: ['**/*.stories.*'],
      rules: {
        'import/no-anonymous-default-export': 'off',
      },
    },
    // CMS content is copy-pasted from the platform, so we don't want linting to yell on it
    {
      files: [
        'src/contentManagement/**/*Config.ts',
        'src/contentManagement/threatCenter/threats.ts',
      ],
      rules: {
        'unicorn/numeric-separators-style': 'off',
      },
    },
    // Numbers are copied from the platform, no sense in changing them
    {
      files: ['src/containers/securityGraphSchema/diagramHardCodedState.ts'],
      rules: {
        'unicorn/numeric-separators-style': 'off',
        '@typescript-eslint/no-loss-of-precision': 'off',
        'no-loss-of-precision': 'off',
      },
    },
    {
      files: ['*.{js,ts}'],
      rules: {
        'tailwindcss/no-custom-classname': 'off',
      },
    },
  ],
  rules: {
    '@typescript-eslint/naming-convention': [
      'error',
      {
        selector: 'typeLike',
        format: ['PascalCase'],
      },
    ],
    'no-undef': 'off',
    'no-only-tests/no-only-tests': 'error',
    'unicorn/filename-case': 'off',
    'no-use-before-define': 'off',
    'import/no-anonymous-default-export': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    'no-debugger': 'warn',
    'unicorn/consistent-function-scoping': 'warn',
    'unicorn/no-nested-ternary': 'off',
    'unicorn/no-useless-switch-case': 'off', // we prefer to be explicit
    'unicorn/prefer-export-from': ['error', { ignoreUsedVariables: true }],
    'unicorn/no-array-reduce': 'off', // we don't often use reduce, but when we do it's usually for a good reason
    //   'react/jsx-props-no-spreading': 'off',
    //   'jsx-a11y/no-static-element-interactions': 'off',
    //   // we have Typescript, no need for old propTypes validation
    'react/prop-types': 'off',
    'react/no-unknown-property': ['error', { ignore: ['css'] }],
    'import/prefer-default-export': 'off',
    '@typescript-eslint/comma-dangle': 'off',
    'react/jsx-props-no-spreading': 'off',
    'react/jsx-no-bind': 'off',
    'react/no-unused-prop-types': 'off',
    'react/require-default-props': 'off',
    'react/function-component-definition': 'off',
    'react/no-unstable-nested-components': [
      'error',
      {
        allowAsProps: true,
      },
    ],
    'react/jsx-key': 'error', // this is turned off in airbnb rules, no idea why
    'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
    '@typescript-eslint/lines-between-class-members': 'off',
    'jsx-a11y/no-static-element-interactions': 'off',
    'jsx-a11y/click-events-have-key-events': 'off',
    'jsx-a11y/anchor-is-valid': 'off',
    'jsx-a11y/label-has-associated-control': [
      2,
      {
        controlComponents: ['NewTextInputField'],
        depth: 3,
      },
    ],
    'no-else-return': 'off',
    'unicorn/no-lonely-if': 'off',
    'unicorn/no-object-as-default-parameter': 'off',
    'unicorn/prefer-ternary': ['warn', 'only-single-line'],
    'global-require': 'off',
    'react/destructuring-assignment': 'off',
    '@typescript-eslint/no-unused-expressions': [
      'error',
      { allowTaggedTemplates: true },
    ],

    'unicorn/prevent-abbreviations': 'off',
    'unicorn/no-null': 'off',
    'unicorn/no-thenable': 'off', // Yup has a `then` property on objects
    'react/no-this-in-sfc': 'off',
    'no-lonely-if': 'off',
    'unicorn/no-array-callback-reference': 'off',
    'unicorn/prefer-spread': 'off', // this gives false positives on Yup schemas and is not very useful otherwise
    //   'jsx-a11y/click-events-have-key-events': 'off',
    //   'react/destructuring-assignment': 'off',
    // removing duplicate: @typescript-eslint/no-unused-vars already checks this.
    'no-unused-vars': 'off',
    'unicorn/no-useless-undefined': 'off',
    'unicorn/consistent-destructuring': 'off',
    'unicorn/no-array-for-each': 'off',
    //   'lines-between-class-members': 'off',
    '@typescript-eslint/no-unused-vars': [
      // Warn instead of error about unused vars, to let devs experiment easily
      // without having CRA break the build and not allowing to view the app.
      'warn',
      {
        // Allow this pattern [_, secondVar] = useHook()
        varsIgnorePattern: '^_',
      },
    ],
    'no-underscore-dangle': [
      'warn',
      {
        // Allow only for graphql built in __typename
        allow: ['__typename'],
      },
    ],
    'graphql/template-strings': [
      'error',
      {
        // Import default settings for your GraphQL client
        env: 'apollo',
      },
    ],
    'no-param-reassign': [
      'error',
      {
        // An exception for the 'immer' library draft function param.
        // See: https://github.com/immerjs/immer/issues/189
        props: true,
        ignorePropertyModificationsForRegex: ['draft', '.*Draft$'],
      },
    ],
    // Adding this to avoid lint errors on autogenerated react-app-env.d.ts
    'spaced-comment': [
      'error',
      'always',
      {
        markers: ['/'],
      },
    ],
    'promise/catch-or-return': 'off',
    //   'global-require': 'off',
    //   'promise/always-return': 'off',
    '@typescript-eslint/no-explicit-any': 'warn',
    //   'import/prefer-default-export': 'off',

    // Add option to disable the no-cycle rule
    'import/no-cycle':
      process.env.DISABLE_ESLINT_NO_CYCLE_RULE === 'true'
        ? 'off'
        : ['error', { ignoreExternal: true }],
    'import/no-extraneous-dependencies':
      process.env.DISABLE_ESLINT_NO_EXTRANEOUS_DEPENDENCIES === 'true'
        ? 'off'
        : ['error', { devDependencies: ['cypress/**/*.{js,ts}'] }],

    // import sorting
    'simple-import-sort/exports': 'warn',
    'simple-import-sort/imports': [
      'warn',
      {
        groups: [
          // Side effect imports.
          ['^\\u0000'],
          // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
          ['^react', '^@?\\w'],
          // Parent imports. Put `..` last.
          ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
          // Other relative imports. Put same-folder imports and `.` last.
          ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
          // Style imports.
          ['^.+\\.s?css$'],
        ],
      },
    ],
    // we need to use @typescript-eslint no-redeclare rule that supports function overloads instead of ESLint no-redeclare.
    // It's turned on by 'react-app' config (warn) and then overridden by 'airbnb-typescript' config (error)
    // in our case 'eslint:recommended' config comes after these 2 configs and turns ESLint no-redeclare back on, so we need to turn it off here ny ourselves
    'no-redeclare': 'off',
  },
};

[rieg-ec]

did you solved the issue? i'm having the same problem

[glekner]

@rieg-ec I had to provide a custom cssFiles

  settings: {
    tailwindcss: {
      cssFiles: ['src/index.css'],
    },
  }

turns out some of the css files were referencing js/ts files that caused the linting to fail