VSCode配置Tailwind CSS智能提示需确保：tailwind.config.js在项目根目录且用module.exports导出、content路径显式含扩展名、语言模式设为typescriptreact等、editor.quickSuggestions.strings开启，并对cn()/tw()等函数配置classRegex。
VSCode 本身不“配置 Node 环境”，它只依赖系统已安装的 Node.js；真正要配的是 Tailwind 的运行链路和编辑器提示能力——Node 是前提，不是 VSCode 的配置项。
确认 Node 和 npm 已就绪，且被 VSCode 正确识别
VSCode 不管理 Node 版本，但会调用你终端里 node -v 和 npm -v 返回的那个版本。常见卡点：
- 在 VSCode 内置终端（
Ctrl+`）里执行node -v报错或版本过低 → 说明系统未装 Node 或 PATH 没生效，需重装 Node.js（推荐 v18.17+ 或 v20.x LTS） - 终端里能跑
npx tailwindcss -v，但 VSCode 插件没提示 → 问题不在 Node，而在插件配置 - Windows 用户用 nvm-windows 切换 Node 版本后，VSCode 终端仍显示旧版 → 关闭所有 VSCode 窗口，重新用
code .启动（否则继承旧 shell 环境）
tailwind.config.js 必须放在项目根目录，且用 module.exports 导出
VSCode 插件 tailwindcss-intellisense 只读取项目根目录（即你执行 code . 打开的那一层）下的 tailwind.config.js 或 tailwind.config.cjs。它不会向上找父目录，也不会自动钻进 src/ 里找。
- 错误写法：
export default { content: [...] }→ 插件静默失败，补全退化为默认值（你自定义的theme.extend.colors.brand完全不出现） - 正确写法：
module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx,vue,html}"] }→ 扩展名必须显式列出，**/*不匹配任何文件 - 若配置真在
src/tailwind.config.js，必须在工作区.vscode/settings.json中加："tailwindCSS.experimental.configFile": "./src/tailwind.config.js"
editor.quickSuggestions.strings 必须设为 true
Tailwind 类名几乎都写在字符串里：className="text-lg bg-blue-500"。而 VSCode 默认关闭字符串内的自动补全——这是 90% 用户装了插件却没提示的真正原因。
立即学习“前端免费学习笔记（深入）”；
- 打开 VSCode 设置（
Ctrl+,），搜索editor.quickSuggestions，展开后把strings勾上 - 该设置影响所有字符串补全（比如 JSON 键、正则字面量），关掉它，连
{"key": ""}里输key都不提示 - 改完不用重启 VSCode，但需重新打开当前文件，或执行命令
Developer: Reload Window
React/Vue/TSX 文件需匹配正确的语言模式，且 class 属性名要被识别
插件默认只在 html、typescriptreact、vue、astro 等语言模式下激活。你在 .tsx 文件里写 className，但右下角显示的是 TypeScript 或 Plain Text，补全就彻底不触发。
- 点击 VSCode 右下角语言标识（如 “TypeScript”），手动切到
TypeScript React（React 项目）或Vue（Vue 项目） - 对非标后缀（如
.page.tsx），在.vscode/settings.json加："files.associations": {"*.page.tsx": "typescriptreact"} - 若用
cn()、tw()或tw`text-lg`包类名，需额外配正则："tailwindCSS.experimental.classRegex": ["cn\(([^)]*)\)"]（注意双反斜杠转义）
最易被忽略的其实是 content 路径是否真能扫到你写的类名文件——哪怕配置语法全对，路径里漏了一个 .vue 后缀，或文件根本没被 import，插件索引就是空的，补全自然失效。
