vscode中tailwind类名无提示的三大原因：配置文件未置于项目根目录且需module.exports导出；文件语言模式非typescriptreact/javascriptreact/html；editor.quicksuggestions.strings未设为true。
装了插件但 class 里没提示？不是插件坏了，是 VSCode 没“认出”你在写 Tailwind —— 核心卡点就三个：配置文件位置、语言模式识别、字符串内提示开关。
tailwind.config.js 必须在项目根目录且 module.exports 导出
插件只扫描你执行 code . 打开的那一层目录下的 tailwind.config.js 或 tailwind.config.cjs。放在 src/ 或 config/ 里，它直接无视。
- 错误写法：
export default { content: [...] }（ESM 语法）—— 除非你 package.json 里写了"type": "module"，否则插件加载失败 - 推荐写法：
module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx,html}"] }（注意路径带扩展名，**/*不行） - content 路径漏掉扩展名，会导致类名索引不全，提示变少甚至消失
文件语言模式必须是 typescriptreact / javascriptreact / html
右下角显示 Plain Text 或 TypeScript，插件压根不启动。它只在明确支持的 language ID 下工作。
- React 项目中，
.tsx文件要确保语言模式是TypeScript React，不是TypeScript - 如果用了自定义后缀（比如
.page.tsx），加这条进settings.json："files.associations": {"*.page.tsx": "typescriptreact"} - 还要告诉插件：这些语言里的字符串也属于 HTML 类名上下文，加配置：
"tailwindCSS.includeLanguages": {"typescriptreact": "html"}
editor.quickSuggestions.strings 必须设为 true
这是最隐蔽的坑：VSCode 默认关闭字符串内的自动补全。哪怕插件全装对、配置全写好，className="text-" 这里依然没下拉菜单。
- 打开设置搜
editor.quickSuggestions，点开后把strings设为true - 改完不用重启 VSCode，但得重新打开当前文件，或手动执行
Developer: Reload Window - 这个开关影响所有字符串提示（比如 JSON key、正则 pattern），关了 Tailwind 就只是冰山一角
动态类名如 bg-${color}-500 天然不支持补全
这不是配置问题，是插件原理决定的。它靠静态扫描 content 路径下的文本生成候选列表，变量插值、模板拼接的结果无法预知。
-
className={`text-${size}-font`}→ 不会提示text-sm-font这种组合 -
clsx("text-base", `bg-${theme}-500`)→ 前半段能提示，后半段不能 - 别在
classRegex或templateStringRegex上硬刚这个限制，徒劳
真正卡住的人，往往只差一个 editor.quickSuggestions.strings 开关，或者右下角语言模式点错了。Tailwind IntelliSense 的逻辑很直白：文件路径对、语言模式对、字符串提示开，三者齐备，提示就出来；缺一不可，而且没有降级兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
