tailwindcss intellisenseでサジェストが効かないときの対処法

VS Codeのtailwindcss intellisenseを使っているのですが、サジェストが表示される時とされないときがあります。

検索してすぐに出てくるのはsetting.jsonに下記設定をするというものばかりですが、これは既に設定済み。

  "editor.quickSuggestions": {
    "strings": true
  }

調べてみると、どうやら、tailwindcss intellisenseは、最初に読み込んだtailwind.config.jsファイルを基準にサジェストするファイルを決めいているようです。

僕はモノレポで複数のプロジェクトやパッケージを作りながら開発し、それぞれにtailwind.config.jsがあるためサジェストが効くファイルと効かないファイルが有り、前は効いていたのに今は効いていないという現象が起きていたようです。

setting.jsonに設定を追加してサジェストできるようになったのですが、setting.jsonだとグローバールナ設定になるので、プロジェクトごとに設定するために、ワークスペースのsetting.jsonに設定したほうが良いです。
ctrol + ,で設定を開き、「ワークスペース」を選択し、「設定（JSON）を開く」をクリック。

「settings」の中に下記のようにtailwind.config.jsファイルの場所と、対象フォルダ設定すればOK.

"tailwindCSS.experimental.configFile": {
  "themes/simple/tailwind.config.js": "themes/simple/**",
  "themes/neon/tailwind.config.js": "themes/neon/**"
}

tailwind.config.jsと対象フォルダのパスは、setting.jsonのfoldersのpathが「.」になっているフォルダからの相対パスです。

下記状態だと、「keikenchi-nextjs」フォルダがルートフォルダになります。

僕の場合だと、ルートフォルダにあるtailwind.config.jsを読み込み、モノレポ全てのフォルダを対象にしたかったので、モノレポのルートまで遡りすべてのフォルダを対象にしました。

tailwindcssのインストール時の設定や、パッケージからインストールした場合、tailwind.config.jsがtailwind.config.tsになっている場合があるのでそれも注意。

僕の場合、tailwind.config.tsになっているのに気づかず、tailwind.config.jsを設定していて設定が反映されずハマりました。

設定を変えて保存し、tailwindcss intellisenseの読み込みがうまくいくと、2～3秒でそのまま反映されます。

2画面表示で片方をtailwindcssの「text-white」などの色が表示されるクラスを表示させ、もう片方でsetting.jsonを開き設定すると、「text-white」などの横に色が表示したり消えたりするのでファイルの読み込み場所やディレクトリ指定に役立ちます。