Tailwind CSS IntelliSens#
Tailwind CSS IntelliSensはVSCodeプラグインで、構文ヒントと自動補完を提供します。必須のプラグインです。
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
よくある問題を以下に列挙します：
1、空白が必要で自動補完がトリガーされる#
.vscode/settings.jsonに以下の設定を追加することで解決できます
"editor.quickSuggestions": {
"strings": true
},
2、自動補完のトリガータイミングをカスタマイズ#
プラグインはデフォルトでユーザーがclassName=xxxを書くと自動補完がトリガーされますが、時には一般的なclassNameをラップすることがあります。例えば、jsオブジェクトにラップする場合です。settings.jsonでtailwindCSS.experimental.classRegexを設定することで問題を解決できます
"tailwindCSS.experimental.classRegex": [
["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*)[\"'`]"]
]
さらにカスタムルールについては、次のリンクを参照してください： https://github.com/paolotiu/tailwind-intellisense-regex-list#classnames
効果は以下の通りです：