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，补全就压根不触发。
- 点击右下角语言标识，手动选成
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 路径 + 语言模式 + 字符串提示开关。少一个，提示就断链。动态类名那块尤其容易反复折腾，得先接受它的边界——它不模拟运行时，只服务静态可分析的部分。
