モノレポで開発時にESLintがうまく効かない時

に、試すべきこと。

事象

プロジェクトにTailwind CSSと併せてESLintのプラグインであるeslint-plugin-tailwindcssを導入したが、独自クラスとして定義したカラーパレットのクラスを使うと警告が出てしまうという事象が発生。

frontend/tailwind.config.ts

const config: Conifg = {
  ...
  theme: {
    extend: {
      colors: {
        'my-white': '#ffffff',
        ...
      }, 
    },
  },
  ...
}

frontend/.eslintrc.json

{
  "extends": [
    ...
    "plugin:tailwindcss/recommended",
    ...
  ],
  ...
}

Classname 'bg-my-white' is not a Tailwind CSS class! eslint(tailwindcss/no-custom-classname)ということで、独自に定義したmy-whiteが読み込めていない様子。
画面で見ると色は正しく反映されているのでlint側の問題のはずだが、whitelistの追加やconfigファイルのパス指定などを試しても警告が消えない。

原因

モノレポ、つまりプロジェクトのroot直下にfrontend backendのようなディレクトリを切っており、かつrootディレクトリでVSCodeを開いた場合、eslintが正しく読み取れない場合がある。そんな時は対象のパス指定が必要。

.vscode/settings.json

{
  "eslint.workingDirectories": ["./frontend"]
}

今回のeslint-plugin-tailwindcssの場合は下記設定でもOK。

frontend/.eslintrc.json

{
  ...
  "settings": {
    "tailwindcss": {
      "config": "./frontend/tailwind.config.ts"
    }
  }
}

これで無事警告が消えました。

configでパス指定をする際、.eslintrc.jsonとtailwind.config.tsが同じ階層にあるので"config": "./tailwind.config.ts"と書きたくなってしまうが、rootからのパスを記述しないと読み込めないため注意が必要（これでハマった）。

参考