Tailwind CSS IntelliSense 扩展未正确配置会导致类名提示缺失、颜色预览不显示或响应式前缀无法补全；需依次安装扩展、配置 tailwind.config.js、确认语言模式、启用颜色预览并排查冲突。
如果您在使用 VSCode 进行 Tailwind CSS 开发时发现类名提示缺失、颜色预览不显示或响应式前缀无法自动补全，则很可能是 Tailwind CSS IntelliSense 扩展未正确配置或功能受限。以下是启用并优化该扩展的多种操作方式：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 Tailwind CSS IntelliSense 扩展
该扩展是 Tailwind 官方维护的语言支持工具，提供语法高亮、智能提示、悬停文档与颜色预览等基础能力。安装是所有后续功能的前提。
1、打开 VSCode，点击左侧活动栏中的扩展图标（或按 Cmd+Shift+X）。
立即学习“前端免费学习笔记（深入）”；
2、在搜索框中输入 Tailwind CSS IntelliSense。
3、在搜索结果中找到由 Tailwind Labs 发布的官方扩展，点击“安装”按钮。
4、安装完成后，重启 VSCode 以确保语言服务器初始化完成。
二、配置项目级 tailwind.config.js 文件
IntelliSense 依赖有效的配置文件识别自定义颜色、间距、断点等，若项目根目录下无此文件，补全将仅限默认值。
1、在项目根目录执行命令 npx tailwindcss init -p 生成基础配置。
2、打开生成的 tailwind.config.js，确认 content 字段已包含模板路径，例如：content: ["./src/**/*.{js,jsx,ts,tsx}"]。
3、保存文件后，VSCode 底部状态栏应显示 Tailwind CSS: Ready 提示。
三、启用 HTML 和 JSX 中的类名自动补全
默认情况下，IntelliSense 仅对 class 属性生效，但需确保目标语言模式被正确识别，且属性名拼写准确。
1、在 HTML 文件中，确认 class 属性书写为 class=""（非 className）。
2、在 React JSX 文件中，确保文件后缀为 .jsx 或 .tsx，且 VSCode 右下角语言模式显示为 JavaScript React 或 TypeScript React。
3、将光标置于引号内并按下 Ctrl+Space，触发手动补全菜单。
四、启用颜色值实时预览
当配置中定义了自定义调色板（如 theme.colors.blue.500），IntelliSense 可在类名旁渲染对应色块，提升视觉验证效率。
1、在 tailwind.config.js 的 theme.extend.colors 中添加至少一组十六进制色值，例如：muted: "#6b7280"。
2、在 HTML 中编写 bg-muted 或 text-muted 类名。
3、将鼠标悬停于该类名上方，查看右侧出现的小型色块预览。
五、解决类名补全不触发的问题
部分项目因配置路径错误、语言模式不匹配或扩展冲突导致补全失效，可通过以下独立方式逐一排查。
1、检查 VSCode 设置中是否禁用了该扩展：进入 设置 → 扩展 → Tailwind CSS IntelliSense → 启用 复选框是否勾选。
2、在命令面板（Cmd+Shift+P）中执行 Tailwind CSS: Restart Server 强制重载语言服务。
3、在项目根目录创建空文件 .vscode/settings.json，写入：{"tailwindCSS.includeLanguages": {"html": "html", "javascript": "javascript"}}。
