需手动启用 tailwindCSS.experimental.hoverPreview 配置项并确保项目含有效 tailwind.config.js，插件 v0.10.0+ 才支持悬停显示 CSS 规则，动态类名和配置路径错误会导致预览失效。
VSCode 安装 Tailwind CSS IntelliSense 插件后仍无悬浮预览？
不是插件没装，而是默认不启用样式预览功能。Tailwind CSS IntelliSense 插件（bradlc.vscode-tailwindcss）的悬浮提示只显示类名文档和语法建议，样式预览（即鼠标悬停时看到对应 CSS 规则）需要额外配置才能开启。
常见错误现象：hover:bg-blue-500 悬停只显示“Sets background color to blue-500”，不显示实际生成的 background-color: #3b82f6；或完全没悬停提示。
- 确认已安装插件，并重启 VSCode（仅启用不足够）
- 项目根目录必须存在有效的
tailwind.config.js或tailwind.config.cjs，且其中content字段正确指向模板文件（如./src/**/*.{js,jsx,ts,tsx}），否则插件无法解析类名上下文 - 插件 v0.10.0+ 才支持样式预览，旧版本需升级
- 确保工作区未禁用该插件（右键插件 → “在工作区中启用”）
如何开启 hover 显示生成的 CSS 规则？
这是核心开关，靠插件的 tailwindCSS.experimental.classRegex 和 tailwindCSS.showFullClassName 不起作用；真正控制样式预览的是 tailwindCSS.experimental.hoverPreview 配置项。
操作步骤：
立即学习“前端免费学习笔记（深入）”；
- 打开 VSCode 设置（
Cmd+,或Ctrl+,） - 搜索
tailwindcss hoverpreview - 勾选
tailwindCSS > Experimental: Hover Preview（或手动在settings.json中添加："tailwindCSS.experimental.hoverPreview": true） - 保存后，重新打开一个 .tsx/.jsx 文件测试 —— 悬停任意有效 Tailwind 类（如
text-sm font-bold），应出现带 CSS 声明块的预览框
注意：该预览依赖插件实时扫描 content 路径下的文件并匹配类名。若类名是动态拼接（如 className={`${base} ${isHovered ? 'bg-red-500' : ''}`），插件可能无法解析，此时不会触发预览。
为什么某些类悬停没反应？常见兼容性陷阱
不是所有写法都能被识别。插件对类名提取有严格语法边界，稍有偏差就失效。
- 只支持静态字符串字面量：
className="p-4 text-center"✅；className={`p-4 ${extra}`}❌（变量部分跳过） - JSX 属性名必须是
className（React）或（Vue）， class属性不支持预览 - 自定义插件或
addUtilities生成的类，需确保它们出现在tailwind.config.js的plugins数组中，且配置已重载（改完 config 后需重启 VSCode 或运行命令Developer: Reload Window） - 使用
@apply的 CSS 文件（如.css或.scss）不触发预览 —— 此功能仅限 HTML/JSX/TSX/Vue 模板中的className
性能影响与多工作区注意事项
开启 hoverPreview 后，插件会在后台持续分析文件内容并构建样式映射表。大型项目（>5k 行模板 + 多层嵌套组件）可能出现轻微延迟（悬停后 200–400ms 才出预览），但不会卡死编辑器。
- 若项目含多个前端子包（如 monorepo 中的
apps/web和packages/ui），需确保每个子包都有独立的tailwind.config.js和node_modules/tailwindcss，否则插件可能读取错配置 - VSCode 工作区设为根目录时，插件默认只监听当前工作区文件；若用多根工作区（multi-root workspace），需为每个文件夹单独启用插件并验证配置路径
- 预览依赖 PostCSS 解析结果，若项目用 Vite / Next.js 等框架且自定义了 PostCSS 配置（如加了
postcss-import），只要tailwindcss插件在 PostCSS 插件链中靠前，通常不影响
最常被忽略的一点：插件不会自动感知你刚新建的 tailwind.config.js —— 必须手动触发一次配置重载，或关闭再打开文件夹。
