如何在VS Code中实现标签外Tailwind样式的自动补全？

当把Tailwind类名存到JS对象的字符串值里时，VS Code的Tailwind CSS IntelliSense扩展默认不会识别这些位置的类名，因此没有自动补全功能。可以通过以下两种方式解决：

方式一：配置VS Code正则匹配规则 #

1. 打开VS Code的设置JSON文件：按下Ctrl+,（Windows/Linux）或Cmd+,（Mac）打开设置面板，点击右上角的「打开设置(JSON)」图标。
2. 添加以下配置，让扩展识别你的styles对象中的类名字符串：

"tailwindCSS.experimental.classRegex": [
  ["styles\\.[a-zA-Z0-9_]+:\\s*['\"`]([^'\"`]+)['\"`]", "$1"]
]

这个正则会匹配styles.xxx: '类名'、styles.xxx: "类名"或styles.xxx: \类名``格式的内容，把引号内的类名字符串交给IntelliSense处理，之后在对象里编写类名就能触发自动补全。

方式二：给类名字符串添加特定注释 #

如果不想修改全局配置，可以给每个类名字符串添加/* tw */注释：

const styles = {
  header: 'flex w-1440 m-2' /* tw */,
  nav: 'flex' /* tw */,
  imageLogo: 'relative pl-20' /* tw */,
}

然后在设置JSON中添加对应的正则规则：

"tailwindCSS.experimental.classRegex": [
  ["'([^']+)'\\s*/\\* tw \\*/", "$1"]
]

这样只有带/* tw */注释的字符串会被识别并触发补全。

额外提示 #

如果后续改用clsx、classnames这类合并类名的库，Tailwind CSS IntelliSense默认会支持这些函数参数里的类名补全，也能避免样式分散在对象中的一些管理问题。

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