VscodeでtailwindCSSの拡張機能が効かないときに確認すること

意外と詰まったので記録を残す。

自分の場合は、2番めのtailwind.config.jsがなかったのが原因だった。
Nuxtのcreate appコマンドでtailwindを選択しても、tailwind.config.jsは作ってくれないみたいで
ファイルが無いことに気づかなかった。

vscodeのsetteings.jsonに以下を追加する

setteings.json

"tailwindCSS.includeLanguages": {
    "plaintext": "vue"
  },
  "tailwindCSS.emmetCompletions": true

参考：https://qiita.com/ikkei12/items/ea78cf8d74912781a438

プロジェクトディレクトリにtailwind.config.jsがあるか確認。

これがないとtailwindがないと見なされるらしく、拡張機能が働いてくれない。

ルートディレクトリに以下の内容でファイルを追加すればよい。

参考：
tailwind.config.jsがないと動かないよとアドバイスが載っているissue
https://github.com/tailwindlabs/tailwindcss-intellisense/issues/49

tailwindcssの公式(tailwind.config.jsの書き方が載っている)
https://tailwindcss.com/docs/configuration#creating-your-configuration-file

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}