需安装Tailwind CSS IntelliSense插件、确保项目含tailwind.config.js、配置settings.json语言关联与class正则、重启语言服务器，最后验证class属性中输入bg-等前缀能否触发带预览的智能提示。
如果您在使用 VSCode 编辑 HTML 或 JSX 文件时，发现 class 属性中无法自动提示 Tailwind CSS 工具类，或输入过程中缺少语法高亮与快捷补全，则可能是插件未正确配置或项目未识别为 Tailwind 环境。以下是实现智能提示与补全的具体操作路径：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装并启用 Tailwind CSS IntelliSense 插件
该插件是官方维护的 VSCode 扩展，专为 Tailwind CSS 提供上下文感知的类名提示、颜色预览、响应式前缀支持及错误检测功能。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按 Cmd+Shift+X）。
立即学习“前端免费学习笔记（深入）”；
2、在搜索框中输入 Tailwind CSS IntelliSense，找到作者为 bradlc 的官方插件。
3、点击“安装”，安装完成后点击“重新加载”使插件生效。
二、确保项目根目录存在 tailwind.config.js 文件
IntelliSense 插件依赖此配置文件识别自定义主题、插件、内容路径等信息；若缺失或路径错误，将仅提供基础工具类提示，无法支持自定义类或 JIT 模式下的动态生成类。
1、在项目根目录（即 VSCode 打开的文件夹）中检查是否存在 tailwind.config.js 文件。
2、若不存在，可通过终端执行 npx tailwindcss init -p 生成最小化配置文件。
3、确认配置中 content 字段已包含当前模板文件路径，例如：content: ["./src/**/*.{js,jsx,ts,tsx,html}"]。
三、配置 VSCode settings.json 启用语言关联与自动补全
VSCode 需明确将特定文件类型与 Tailwind CSS 语言服务绑定，否则 HTML 或 JSX 中的 class 属性不会触发 IntelliSense。
1、按下 Cmd+, 打开设置界面，点击右上角“打开设置（JSON）”图标。
2、在 settings.json 中添加以下配置项：
3、"tailwindCSS.includeLanguages": {"html": "html", "javascript": "javascript", "typescript": "typescript", "javascriptreact": "javascriptreact", "typescriptreact": "typescriptreact"}
4、"tailwindCSS.experimental.classRegex": ["class=\"([^\"]*)\", "className=\"([^\"]*)\"]
四、重启语言服务器或重载窗口
插件配置变更后，需手动刷新语言服务以应用新设置，避免缓存导致提示未生效。
1、按下 Cmd+Shift+P 打开命令面板。
2、输入并选择 Tailwind CSS: Restart Server。
3、若仍无响应，可执行 Developer: Reload Window 强制重载整个编辑器环境。
五、验证提示功能是否正常激活
在已配置的 HTML 或 JSX 文件中，于 class 属性值内输入空格后键入字母（如 m），应立即出现以 m 开头的间距类（如 mb-4、ml-auto）候选列表，并显示对应 CSS 值预览浮层。
1、新建一个 index.html 文件，写入 。
2、将光标置于双引号内，输入 bg-，观察是否弹出背景色类列表并显示色块预览。
3、输入 md:text-，确认是否列出断点下文本大小类，且光标悬停时显示完整 CSS 规则。
