需手动启用 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

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

下载

• 打开 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 —— 必须手动触发一次配置重载，或关闭再打开文件夹。

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