能否在任意位置的TailwindCSS颜色类旁显示颜色指示框？

默认情况下，Tailwind CSS IntelliSense插件只会自动识别HTML的class/className属性、CSS/SCSS文件中的类名这类常规位置的Tailwind类，对于JS对象里的类名（比如{ border: 'border-error-400' }）不会主动识别，所以不会显示颜色指示框。

要让所有位置的颜色类都显示颜色框，你可以通过配置插件的自定义匹配规则来实现：

• 打开VS Code的设置（快捷键Ctrl+,或Cmd+,），搜索tailwindCSS.experimental.classRegex
• 点击「编辑 in settings.json」，添加自定义正则规则，比如针对JS对象的场景：

"tailwindCSS.experimental.classRegex": [
  // 匹配类似 { btnClass: 'border-error-400 bg-blue-500' } 这种对象值里的类
  ["([a-zA-Z0-9-]+)\\s*:\\s*['\"]([^'\"]*)['\"]", "'([^']*)'", "\"([^\"]*)\""]
]

这个正则会匹配JS对象中属性值为字符串的内容，把里面的Tailwind类识别出来。如果你的代码有特殊写法，可以调整正则表达式来适配。

• 保存设置后，重启VS Code或者重新加载窗口（Ctrl+Shift+P输入「Reload Window」），就能看到JS对象里的颜色类也显示颜色框了。

注意：这个功能依赖Tailwind CSS IntelliSense插件，确保你已经在VS Code中安装了它。

内容的提问来源于stack exchange，提问作者Harry Northover