【TailwindCSS, ESLint】存在するはずのclassに対して"no-custom-classname"が発生する

問題

VS Code + Tailwind CSS IntelliSense + ESLint-plugin-tailwindcssで開発中、存在するはずのclassに対してtailwindcss/no-custom-classnamewarningが発生しました（styleは問題なく適用されます）。

sample.html

<div className="text-emerald-200">text</div>

Classname 'text-emerald-200' is not a Tailwind CSS class! eslint(tailwindcss/no-custom-classname)

解決方法

Make sure to use the correct version
Still using TailwindCSS v2 ?
You should stick with v1.x.x or v2.x.x of this plugin (next support releases will be using major version 2)
Using TailwindCSS v3 ?
Make sure to use v3.x.x of this plugin
eslint-plugin-tailwindcss

package.json

{
  "dependencies": {
    "next": "12.0.7",
    ...
  },
  "devDependencies": {
    "eslint-plugin-tailwindcss": "^1.17.2",
    "tailwindcss": "^3.0.7",
    ...
  }
}

TailwindCSSとeslint-plugin-tailwindcssのバージョンが合っていませんでした。

npm install eslint-plugin-taiwlindcss@latest

package.json

{
  "devDependencies": {
    "eslint-plugin-tailwindcss": "^3.0.3",
    "tailwindcss": "^3.0.7",
    ...
  }
}

sample.html

<div className="text-emerald-200">text</div>

(No warning.)

初歩的なミスですが解決まで少し時間がかかってしまったため、忘れないように残しておきます。