[BUG] no-custom-classname triggers with custom colors

[damianobarbati]

Describe the bug

I see the rule no-custom-classname not being applied correctly:

• Having custom colors trigger the rule
• Even defining the cssFiles paths array, my custom classes are not found and do trigger the rule

For instance in my repo the following will trigger, even if the color orange-accent is defined and .loading class is in my index.css file:

<div className="bg-orange-accent loading" />

I'm using the latest versions of everything:

    "@typescript-eslint/eslint-plugin": "^5.54.0",
    "@typescript-eslint/parser": "^5.54.0",
    "eslint": "^8.35.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "eslint-plugin-tailwindcss": "^3.10.1",
    "eslint-plugin-testing-library": "^5.10.2",
    "prettier": "^2.8.4",
    "tailwindcss": "^3.2.7",
    "typescript": "^4.9.5"

To Reproduce .eslintrc content:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2022,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "es2022": true,
    "node": true
  },
  "plugins": [
    "@typescript-eslint",
    "prettier",
    "simple-import-sort",
    "react",
    "react-hooks",
    "testing-library"
  ],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "plugin:react-hooks/recommended",
    "plugin:tailwindcss/recommended"
  ],
  "overrides": [
    // Only uses Testing Library lint rules in test files
    {
      "files": [
        "**/*.test.[jt]s?(x)"
      ],
      "extends": ["plugin:testing-library/react"]
    }
  ],
  "rules": {
    "no-console": "off",
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "printWidth": 100
      }
    ],
    "@typescript-eslint/consistent-type-assertions": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": 1,
    "@typescript-eslint/no-inferrable-types": [
      "warn",
      {
        "ignoreParameters": true
      }
    ],
    "@typescript-eslint/no-unused-vars": "warn",
    "simple-import-sort/imports": [
      "error",
      {
        "groups": [
          [
            "^\\u0000",
            "^@?\\w",
            "^[^.]",
            "^\\."
          ]
        ]
      }
    ],
    "simple-import-sort/exports": "error",
    "tailwindcss/no-custom-classname": ["error", {
      "cssFiles": ["src/*.css", "src/**/*.css"]
    }]
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

tailwind.config.js content:

module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  corePlugins: {
    preflight: false,
  },
  theme: {
    extend: {
      colors: {
        'grey-dark': '#2A2A2A',
        'grey-input': '#4b5563',
        'orange-accent': '#FF5900',
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
  important: '#root',
  experimental: {
    applyComplexClasses: true,
  },
};

index.css content:

@tailwind base;
@tailwind components;
@tailwind utilities;

.loading {
  @apply relative min-h-[calc(100vh_-_554px)] flex items-center justify-center;
}

[damianobarbati]

cc @lbltavares

[damianobarbati]

It looks like directives are honored only if under the settings definition:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2022,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "es2022": true,
    "node": true
  },
  "plugins": [
    "@typescript-eslint",
    "prettier",
    "simple-import-sort",
    "react",
    "react-hooks",
    "testing-library",
    "tailwindcss"
  ],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "plugin:react-hooks/recommended",
    "plugin:tailwindcss/recommended"
  ],
  "overrides": [
    // Only uses Testing Library lint rules in test files
    {
      "files": [
        "**/*.test.[jt]s?(x)"
      ],
      "extends": ["plugin:testing-library/react"]
    }
  ],
  "rules": {
    "no-console": "off",
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "printWidth": 100
      }
    ],
    "@typescript-eslint/consistent-type-assertions": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/no-unused-vars": "warn",
    "simple-import-sort/imports": [
      "error",
      {
        "groups": [
          [
            // Node and React and related packages come first
            "^(react|node:)", "^@?\\w",
            // Internal packages.
            "^(@|components)(/.*|$)",
            // Side effect imports.
            "^\\u0000",
            // Parent imports. Put `..` last.
            "^\\.\\.(?!/?$)", "^\\.\\./?$",
            // Other relative imports. Put same-folder imports and `.` last.
            "^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$",
            // Style imports.
            "^.+\\.?(css)$"
          ]
        ]
      }
    ],
    "simple-import-sort/exports": "error",
    "tailwindcss/no-custom-classname": "error"
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "tailwindcss": {
      "config": "./services/web/tailwind.config.js",
      "cssFiles": [
        "./services/web/src/**/*.css"
      ]
    }
  }
}

[cloud-walker]

Already tried with the settings solution, still not working for me, by my case is that I use a tailwind.config.ts config, so maybe is because of that?

In the config I also import the theme stuff from outside the module:

import { Config } from 'tailwindcss';

import {
  color,
  spacing,
  borderRadius,
  shadow,
  fontWeight,
} from './app/src/styles';

const config: Config = {
  content: ['./index.html', './app/src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    spacing,
    colors: color,
    borderRadius,
    boxShadow: shadow,
    dropShadow: shadow,
    fontWeight,
    extend: {},
  },
  plugins: [],
};

export default config;

[cloud-walker]

Just found this

[piedrahitapablo]

I'm seeing this issue too, it can also be related to the plugin not being able to resolve the tailwind config, do you know if there's a way to debug it?

I tried running eslint with --debug but I didn't see any logs related to the tailwind config

[cloud-walker]

I personally think that the plugin should throw instead of returning {}

[vincent0426]

Same issue

[daniel-covelli]

(This might not be related) Spent hours trying to figure this out. Turns out eslint was confused because my project in Vscode is open in a monorepo view. Fix it by adding this setting to my .vscode file at the root of the monorepo:

"eslint.workingDirectories": [
    {
      "pattern": "./name-of-project"
    },
]

[meoyawn]

also had to specify working directories in WebStorm (monorepo, flat config) https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_eslint_manual_configuration