VSCode 默认不提示 HTML class 类名，因其仅依赖内置词典且不解析 CSS 文件；需安装“IntelliSense for CSS class names in HTML”插件并启用 editor.suggest.showClasses 和 editor.quickSuggestions.strings。
VSCode 默认不识别项目中自定义的 HTML/CSS 类名，所以写 class="btn-" 时不会自动提示 btn-primary 或 btn-outline —— 这不是配置错了，是它根本没读你的 CSS 文件或框架类定义。
为什么原生 VSCode 不提示类名？
VSCode 的 HTML 补全只依赖内置的 HTML 标签和属性词典，对 class 值不做语义分析。它不知道你用的是 Tailwind、Bootstrap，还是自己写的 utils.css，更不会扫描 node_modules 或 src/styles/ 下的类定义。
要让它“懂”类名，必须靠插件做三件事：解析 CSS（含预处理器）、索引类名、在 HTML 的 class 属性值中触发提示。
推荐插件：IntelliSense for CSS class names in HTML
这是目前最稳定、轻量、支持度广的方案，GitHub 星标超 3.5k，适配 CSS/SCSS/Less，也支持 Tailwind（需额外配置）。
立即学习“前端免费学习笔记（深入）”；
- 安装后默认启用，无需修改设置
- 自动扫描项目根目录下所有
*.css、*.scss、*.less文件 - 在 HTML 的
class=""双引号内输入时，按Ctrl+Space（macOS 是Cmd+Space）手动唤出提示，或设为自动触发（见下条） - 支持
@import和@use（SCSS），但不解析 JS 动态生成的类（如clsx()）
让类名提示自动弹出，不用按快捷键
默认行为是“按需触发”，很多人以为失效，其实是没主动唤出。想实现输入 class="m" 就自动列 mb-2、ml-auto，得改两个设置：
- 打开 VSCode 设置（
Ctrl+,），搜索editor.suggest.showClasses→ 设为true - 再搜索
editor.quickSuggestions→ 点开strings项，设为true（这会让双引号内自动激活建议） - 如果用了 Tailwind，还需在项目根目录加
tailwind.config.js，插件才能识别其工具类；否则只提示你 CSS 文件里真正声明过的类
其他插件对比：哪些可以但没必要？
Auto Rename Tag 和 HTML Boilerplate 完全无关，别装错；Tailwind CSS IntelliSense 很强，但只服务 Tailwind——如果你混用原生 CSS + BEM + Tailwind，它会漏掉非 tw- 前缀的类；Ember Snippets 或 Vue - Official 在 .vue 文件里有用，但纯 HTML/CSS 项目里反而增加干扰。
真正要注意的是：插件无法跨工作区索引类名。比如你在 monorepo/packages/ui 写组件，在 apps/web 引用，那 apps/web 的 HTML 里不会提示 packages/ui 的 CSS 类——得把 CSS 路径显式加入插件的 files.associations 或用符号链接。
