「tailwind intellisense」の補完が効かない場合の対応方法についてです。
補完が効かない理由と対策について調べてわかったことをまとめておきますので誰かの役に立てると幸いです。
補完が効かない「理由」
「tailwind intellisense」はtailwind.configの設定を確認して補完します。
デフォルトの設定ではルート配下に設置されているtailwind.configの設定を反映させるようです。
つまりモノレポで作成されたプロジェクトの場合、反映させたいConfigがルート配下にない場合「補完が効かない」という事態が起こります。
解決方法
調べると下記の設定をVSCodeのsetting.jsonに書き加えることで解決するとあります。
"editor.quickSuggestions": {
"strings": true
}
ただ、先ほど述べた反映させたいConfigファイルの位置がルートではない場合は設定しても反映されません。
なのでsetting.jsonに下記の記述を加えてください。
"tailwindCSS.experimental.configFile": "path/to/your/tailwind.config.js",
これで独自で設定した設定も含めてtailwindのclassが補完されるようになると思います！
まとめ
TailwindCSSを利用してのコーディングに慣れていない状況で「tailwind intellisense」が使えるのと使えないのでは作業効率がかなり変わります！
それ以外にもたくさん便利なプラグインがあるので積極的に導入して試してみてください！