vscode默认不补全html中css类名，因原生不解析css文件；需装intellisense for css class names in html或tailwind css intellisense插件，并开启editor.suggest.showclasses、editor.quicksuggestions.strings及正确配置css.stylesheets路径。
VSCode 默认不补全 HTML 中的 CSS 类名，不是你配置错了，是它压根没读你的 CSS 文件——装对插件、开对设置、路径对得上，三者缺一不可。
为什么 class="" 里敲字没提示？
原生 VSCode 的 HTML 补全只认标签和属性名（比如 class、id），对引号里的值不做任何语义分析。它不知道你项目里有 btn-primary，更不知道 tw-bg-blue-500 是 Tailwind 的类。补全行为必须由外部插件驱动，且依赖明确的 CSS 文件路径和语言上下文。
- 插件不会自动扫描
node_modules或未被<link>引入的 CSS 文件 - 如果 CSS 在
src/assets/styles/utils.css，但插件默认只扫src/**/*.css，那就找不到 - 文件后缀不是
.html（比如用了.htm或无后缀），VSCode 可能识别为 Plain Text，直接跳过 HTML 语言服务
装哪个插件才真正管用？
别装一堆名字带 “CSS”“HTML” 的插件凑数，重点就两个：
-
IntelliSense for CSS class names in HTML：轻量、稳定、支持 CSS/SCSS/Less，能解析@import和@use，适合混用原生 CSS + BEM + 自定义工具类的项目 -
Tailwind CSS IntelliSense：官方出品，专治 Tailwind，支持 JIT 模式、颜色预览、响应式前缀（md:flex）、自定义theme.extend，但只认tailwind.config.js定义的范围
二者不互斥，可以共存：前者管你写的 .card__header，后者管 bg-gradient-to-r。但别同时启用多个类名索引插件，容易冲突或漏提示。
关键设置必须手动开
装完插件只是第一步，以下三项设置不调，90% 的人会以为插件“失效”：
-
editor.suggest.showClasses→ 设为true（让类名出现在补全列表中） -
editor.quickSuggestions.strings→ 设为true（让双引号内触发建议，否则class="|"不弹） -
css.styleSheets→ 在settings.json里显式声明路径，例如："css.styleSheets": ["src/**/*.css", "assets/styles/*.scss"]；monorepo 中跨包引用需加符号链接或绝对路径
注意：editor.quickSuggestions 是个对象，别误设成布尔值；strings 项单独控制，不影响 JS 字符串补全逻辑。
Tailwind 类名不出现？检查 config 和 content
哪怕装了 Tailwind CSS IntelliSense，如果 tailwind.config.js 缺失、路径不对，或 content 字段没覆盖到你的 HTML 文件，插件就只能猜基础类，bg-opacity-70 这种 JIT 类根本不会出现。
- 运行
npx tailwindcss init -p确保配置文件存在 - 确认
content包含模板路径，如：content: ["./src/**/*.{html,js,ts,jsx,tsx}"] - 如果用 Vite，确保没有在
vite.config.ts中用optimizeDeps.exclude把 Tailwind 相关模块排除掉 - 重启 VSCode 或执行命令
Developer: Restart Language Server，插件不会热重载配置
最常被忽略的一点：插件无法索引 JS 动态拼接的类名（class={`${base} ${show ? 'active' : ''}`），这类场景只能靠 clsx() 配合类型定义，或改用 twMerge + 插件的 tailwindCSS.experimental.classRegex 配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
