【VSCode】Tailwind CSS IntelliSense で補完が効かない場合
はじめに
VSCodeの拡張機能で、Tailwind CSS IntelliSenseを入れてみたものの、補完が効かず四苦八苦したので、同じ轍を踏む誰かのためにメモ
よりハマった理由としては、チュートリアルで試したときには、補完が効いてたってのに…ってなって、いろいろ設定見直しの、拡張機能を入れたり追加したりして大変だった…
調べるとすぐ出てくる対処法
- setting.jsonに下記設定追加
"editor.quickSuggestions": {
"strings": true
}
そのほかにも、いろいろあるが…
今回の原因
setting.json とか見直しても大丈夫そうだしなぁ…とおもい
Troubleshootingの項目見てたら、
Ensure that you have a Tailwind config file in your workspace and that this is named tailwind.config.js. Check out the Tailwind documentation for details on creating a config file.
ワークスペースに、tailwind.config.jsと名前で設定ファイルが必要とある。でも、インストールの流れで作成済みである。ただ、vscodeに読み込んでるフォルダは後述のような感じしており、それが原因だった模様。
補完が効かないフォルダの読み込み
開発しようとしているプロジェクトは、
- spring + thymeleaf
- 基本的にはeclipseを使う
- htmlの編集だけはvscodeで
- cssをビルドする関連資材は、ソースとは別のところに置きたい
という思いがあって、使うフォルダだけvscodeで編集すればいいかとなり…
「ワークスペースにフォルダを追加」で、cssビルド用のフォルダと、htmlを作成していくフォルダをそれぞれ追加していた
解決したフォルダの読み込み
プロジェクトごと、vscodeで開くだけでtailwind.config.jsを認識してくれる
おわりに
拡張機能の設定で、手動でtailwind.config.jsのパスを指定する方法もありそうだったが、Experimentalとあったのでとりあえずプロジェクトごとを読み込むことで対応した。
（でも、ワークスペースって言葉の範囲って英語と日本語でニュアンス違ったりするんかな…？別々にフォルダを追加してても、ワークスペースは一つだしなぁっと思った。）
Discussion