Zenn
🎉

eslint-plugin-tailwindcssを入れると、lint時にエラー

2024/03/12に公開
ESLint
Tailwind CSS
tech

やりたいこと

eslint-plugin-tailwindcssを入れたい。

行ったこと

npm install -D eslint-plugin-tailwindcss

.eslintrc.jsonに、

"extends": [
    //中略//
    "plugin:tailwindcss/recommended"
],
"plugins": [
    //中略//
    "tailwindcss"
],

を追加。

npm run lintを実行。

※package.jsonで下記のようにlintを指定していた。

"lint": "eslint . --fix",

起きた事象

Oops! Something went wrong! :(

ESLint: 8.57.0

CssSyntaxError: Error while loading rule 'tailwindcss/no-custom-classname': <css input>:43:22: Unknown word      
Occurred while linting C:XXXXXXXXXXXXXXX\postcss.config.js
    at Input.error (C:XXXXXXXXXXXXXXX\node_modules\postcss\lib\input.js:106:16)
    at Parser.unknownWord (C:XXXXXXXXXXXXXXX\node_modules\postcss\lib\parser.js:594:22) 
    at Parser.other (C:XXXXXXXXXXXXXXX\node_modules\postcss\lib\parser.js:436:12)       
    at Parser.parse (C:XXXXXXXXXXXXXXX\node_modules\postcss\lib\parser.js:471:16)       
    at Function.parse (C:XXXXXXXXXXXXXXX\node_modules\postcss\lib\parse.js:11:12)       
    at generateClassnamesListSync (C:XXXXXXXXXXXXXXX\node_modules\eslint-plugin-tailwindcss\lib\util\cssFiles.js:30:28)
    at Object.create (C:XXXXXXXXXXXXXXX\node_modules\eslint-plugin-tailwindcss\lib\rules\no-custom-classname.js:114:33)
    at createRuleListeners (C:XXXXXXXXXXXXXXX\node_modules\eslint\lib\linter\linter.js:895:21)
    at C:XXXXXXXXXXXXXXX\node_modules\eslint\lib\linter\linter.js:1066:110
    at Array.forEach (<anonymous>)

Oops!じゃねぇよ・・・怒

調査結果

https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/189
これが該当しそう。

.eslintrc.jsonで、

settings: {
    tailwindcss: {
      cssFiles: ['resources/css/app.css'],
    },
}

を追記したら、上手くいった。

Discussion