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

效果如下：