根本原因是vscode未读取配置、未识别语言模式或未开启字符串补全:需确保tailwind.config.js在根目录并用module.exports导出、content路径显式含扩展名、语言模式设为typescript react/html/vue、editor.quicksuggestions.strings设为true,并为cn()/tw()等函数配置classregex。

装了 tailwindcss-intellisense 却没提示,90% 不是插件问题,而是 VSCode 根本没“读到”你的配置、没认出你在写 Tailwind、或者连字符串补全都关着。
tailwind.config.js 路径和导出格式不对
插件只认项目根目录(即你执行 code . 打开的那一层)下的 tailwind.config.js 或 tailwind.config.cjs。它不会自动找 src/tailwind.config.js,也不会向上扫描父目录。
- 如果配置在子目录,必须在工作区
.vscode/settings.json里加:"tailwindCSS.experimental.configFile": "./src/tailwind.config.js" - 导出必须用
module.exports = {};用export default {}会静默失败,除非package.json明确写了"type": "module"且 Node ≥14.18 - 哪怕空配置也得存在且语法合法:
module.exports = {},不能只是文件名对但内容报错 - 配置里不能有
require('missing-package')、fs.readFileSync('not-exist.txt')或await—— 一出错就退回到默认主题,自定义颜色/断点全消失
editor.quickSuggestions.strings 关着
Tailwind 类名几乎全写在字符串里:className="text-lg bg-blue-500"。而 VSCode 默认关闭字符串内的自动提示,这是最常被忽略的开关。
- 打开设置(
Ctrl+,或Cmd+,),搜editor.quickSuggestions - 展开后把
strings设为true - 改完不用重启 VSCode,但要重新打开当前文件,或执行命令
Developer: Reload Window - 这个开关影响所有字符串提示(比如 JSON 键名、正则字面量),关掉它,连
{"key": ""}里输key都不提示
语言模式不是 TypeScript React / HTML / Vue
插件默认只在 html、typescriptreact、vue 等语言模式下激活。你在 .tsx 文件里写 className,但右下角显示的是 TypeScript 或 Plain Text,补全就压根不触发。
- 点击右下角语言标识,手动切到
TypeScript React(React 项目)或VUE(Vue 项目) - 对非标后缀(如
.page.tsx),在settings.json加映射:"files.associations": {"*.page.tsx": "typescriptreact"} - 确保
tailwindCSS.includeLanguages包含对应项,例如:"typescriptreact": "html"
用了 cn() / tw() / 模板字符串却没配 classRegex
插件默认只解析 class="" 和 className="xxx" 字面量。一旦你用 cn()、tw() 或 tw`text-lg`,就得手动告诉插件“从哪儿提取字符串”。
- 在工作区或用户
settings.json的tailwindCSS节点下加:"tailwindCSS.experimental.classRegex": ["cn\(([^)]*)\)", "tw\`([^`]*)\`"] - 正则里的括号和反引号必须转义,否则不生效
- 动态拼接如
className={`bg-${color}-500`}天然不支持补全——这是设计限制,不是 bug,别折腾正则硬套 - 如果用了
@apply或theme()函数,确认插件版本 ≥ v0.14.6,旧版不支持
最易被忽略的是:插件加载失败时不会弹错误提示,只会静默降级为默认配置;右下角看不到 Tailwind CSS 图标,或提示 Cannot resolve config,就是卡在这一步。路径、导出、字符串开关、语言模式,四者缺一不可。











