Nuxt3の開発をしていてVSCodeのTailwind CSS IntelliSense拡張機能が動かなくなったとき

この記事の立ち位置

突然拡張機能による補完が効かなくなったため、私の場合これで解消したという共有で、
Nuxt3はまだ技術記事も少ないため、一時のバグかも知れませんが参考になれば幸いです。

環境

• MacOS
• VSCode: 1.74.3
• Tailwind CSS IntelliSense: v0.9.6

事象

ある日VSCodeのバージョンアップを行うために再起動を行ったところ、以下の画像のようにTailwind CSS IntelliSenseによる補完機能が効かない状態になっていた。

結論

拡張機能を有効にするフォルダに関して、.nuxtフォルダを除外することで正常に動作する状態に戻った。
関連するGitHubのIssue

拡張機能の設定にアクセスするには、他にも方法はあると思うが以下の画像の設定マーク→「拡張機能の設定」→「Files: Exclude」に追加した。

アプローチ方法

ありきたりだが、ターミナルなどのタブがある「出力」→「Tailwind CSS IntelliSense」を選択するとエラーが出ていたため、エラー内容でググった。

今回は当てはまらなかったもの

1. tailwind.config.jsファイルが存在しない→今回はちゃんとファイルがあったが、ワークスペースの直下に無い場合は作成する
2. setting.jsonの設定→以下の設定を施すことで直る場合もある様子

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

2.の参考記事

まとめ

今回はNuxt由来だったので記事タイトルも絞ったが、汎用的には今回当てはまらなかったパターンでの解決例が多そう。
あとはエラーログは大事。（今回この拡張機能のエラーが出ている箇所を初めて知った）
以上。