unocss提示被tailwind插件“吃掉”的根本原因是二者竞争字符串补全权限：tailwind插件默认强干预class字符串并抢先响应，导致unocss失去触发机会；解决方法是禁用tailwind的showinlinecompletions和classregex，保留其非补全功能，同时确保unocss的triggercharacters包含-:[]()并启用editor.quicksuggestions.strings。
UnoCSS 和 Tailwind 插件在 VSCode 中同时启用时，类名提示会互相压制甚至完全消失 —— 根本原因不是“不兼容”，而是两个插件都试图接管 class 字符串内的补全逻辑，且未协商上下文优先级。
为什么 UnoCSS 提示被 Tailwind 插件“吃掉”？
VSCode 的语言服务器（LSP）补全机制中，多个插件可同时响应同一位置的触发请求，但最终只展示一个插件的建议列表。Tailwind CSS 官方插件（bradlc.vscode-tailwindcss）默认对所有 class 属性启用强干预策略，它会主动拦截字符串内容、解析 class 名并返回补全项；而 antfu.unocss 插件依赖更精细的 AST 上下文（比如是否在 Vue SFC 的 class 绑定中），一旦 Tailwind 插件抢先响应并“锁住”补全通道，UnoCSS 就收不到触发机会。
常见现象包括：
- 输入
p-时只看到 Tailwind 的px-/py-，没有 UnoCSS 的px-2/pr-4等变体 - Vue 模板中
:class="['flex', 'text-']"完全无提示（Tailwind 不处理动态绑定，但它的拦截行为仍阻止了 UnoCSS 响应） - 悬停能显示 UnoCSS 规则（说明配置有效），但输入时不弹出补全框
禁用 Tailwind 插件的 class 补全，保留其语法高亮与 @apply 支持
Tailwind 插件的功能可拆解：补全（completion）、悬停（hover）、诊断（diagnostics）、语法高亮（syntax highlighting）。你不需要关掉整个插件，只需关闭它最“霸道”的部分。
在 settings.json 中添加或修改以下配置：
{
"tailwindCSS.experimental.classRegex": [],
"tailwindCSS.includeLanguages": {
"html": "html",
"javascript": "javascript",
"typescript": "typescript",
"vue": "html"
},
"tailwindCSS.showInlineCompletions": false,
"tailwindCSS.emerald": false
}
关键点说明：
-
"tailwindCSS.showInlineCompletions": false是核心开关，它禁用 Tailwind 的内联补全（即输入时自动弹出的类名列表） -
"tailwindCSS.experimental.classRegex": []清空正则匹配规则，防止它在非标准属性（如class:list或class:xxx）中误触发 - 保留
"tailwindCSS.includeLanguages"可继续享受@apply诊断、颜色预览、theme()函数跳转等非补全能力
确保 UnoCSS 插件获得 class 字符串的“首响权”
即使 Tailwind 补全已关，UnoCSS 仍需明确声明自己要参与字符串补全，并覆盖默认触发字符集。
在 settings.json 中确认存在以下两项：
{
"editor.quickSuggestions": {
"strings": true
},
"unocss.triggerCharacters": ["-", ":", "[", "]", "(", ")"]
}
特别注意：
- 如果项目是 Vue SFC，必须启用
Volar（而非 Vetur），且确保vue.html.suggest.html5为true，否则 Volar 不会把class属性内容传给 UnoCSS 插件 -
"("和")"必须加入triggerCharacters，否则像md:(p-4 w-1/2)这类响应式组语法无法触发补全 - 不要在
.vscode/settings.json中覆盖全局editor.quickSuggestions，否则可能意外关闭strings
验证是否真正在用 UnoCSS 而非 Tailwind 的类名缓存
VSCode 的补全建议有缓存机制。即使你已停用 Tailwind 补全，它之前生成的 class 名索引仍可能残留，导致输入 bg- 时弹出旧的 Tailwind 列表。
执行以下操作清空干扰：
- 关闭所有打开的文件，重启 VSCode 窗口（不是重载）
- 在任意
.vue文件中输入class="text-"，观察补全项来源 —— 正确情况下应显示text-red-500（UnoCSS preset-uno）、text-opacity-70（UnoCSS preset-uno）等，而不是text-xs/text-sm（Tailwind 原生类） - 若仍有 Tailwind 类名，检查
node_modules/下是否同时存在tailwindcss和unocss，并在vite.config.ts中确认只启用了@unocss/vite插件，未同时加载tailwindcss/plugin
真正生效的标志是：补全项右侧带 UnoCSS 标签，且悬停显示规则来自 uno.config.ts 中定义的预设，而非 tailwind.config.js。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
