tailwind css intellisense 无提示的主因是 vscode 未识别文件语言模式或配置未对齐：需确保 tailwind.config.js 在根目录、用 module.exports 导出、content 路径显式含扩展名、语言模式设为 typescript react/html/vue、开启 editor.quicksuggestions.strings，动态类名（如 bg-${color}-500）则天然不支持补全。

Tailwind CSS IntelliSense 插件装了但 class 里没提示，大概率不是插件没起作用，而是 VSCode 没“认出”你的文件是 Tailwind 使用场景，或者配置没对上插件的解析逻辑。

tailwind.config.js 不在项目根目录或导出格式错误

插件只读取项目根目录（即你执行 code . 打开的那一层）下的 tailwind.config.js 或 tailwind.config.cjs。如果它在 src/ 里、或用的是 export default 但没配 "type": "module"，插件就加载失败，后续所有提示都归零。

• 确认文件路径：必须是 ./tailwind.config.js，不能是 ./src/tailwind.config.js
• 导出写法优先用 module.exports = { ... }，避免 ESM 语法除非你明确设置了 package.json 中的 "type": "module"
• content 字段必须显式覆盖模板路径，比如 ["./src/**/*.{js,jsx,ts,tsx,html}"]，别写成 ["./src/**/*"] —— 后者会漏掉扩展名匹配，也拖慢扫描

文件语言模式没识别成 TypeScript React / HTML / Vue

插件默认只在 html、typescriptreact、vue 等语言模式下激活。你在 .tsx 文件里写 className，但右下角显示的是 Plain Text 或 TypeScript，补全就压根不触发。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

• 点击右下角语言标识，手动选成 TypeScript React（React 项目）或 Vue（Vue 项目）
• 对非标后缀（如 .page.tsx），在 settings.json 加映射："files.associations": {"*.page.tsx": "typescriptreact"}
• 确保 tailwindCSS.includeLanguages 包含对应项，例如 React 项目要加："typescriptreact": "html"

字符串内不提示：editor.quickSuggestions.strings 关闭

Tailwind 类名绝大多数写在字符串里（class="..."、className="..."），而 VSCode 默认关闭字符串内的自动提示。这是最隐蔽也最常见的“没提示”原因。

• 打开设置，搜 editor.quickSuggestions，展开后把 strings 设为 true
• 改完不用重启，但得重新打开当前文件或执行 Developer: Reload Window
• 这个设置影响所有字符串提示，不只是 Tailwind；关掉它，连 JSON 字符串里的 key 都不提示

动态类名（如 bg-${color}-500）永远不补全

这不是配置问题，是设计限制。插件靠静态分析 content 路径下的文本内容生成候选类名列表，变量插值、模板拼接、运行时计算的结果无法被提前预知。

• 别指望 className={`text-${size}-font`} 能补全 text-sm-font 这种组合
• 想获得完整提示，要么改用 @apply 写进 CSS 文件（注意：插件只支持 @apply 行内补全，不支持纯 CSS 文件里的类名提示）
• 要么把动态逻辑抽到 computed 或 useMemo，让 class 属性保持静态字符串形式

真正卡住人的往往不是“怎么配”，而是插件依赖多个环节同时对齐：配置文件位置 + 导出格式 + content 路径 + 语言模式 + 字符串提示开关。少一个，提示就断链。动态类名那块尤其容易反复折腾，得先接受它的边界——它不模拟运行时，只服务静态可分析的部分。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！