必须用Tailwind CSS IntelliSense（bradlc版）或LSP-TailwindCSS，二者不可共存；前者轻量适配HTML/JSX，后者功能全但需手动安装language server；缺一配置如tailwind.config.js路径错、content漏扩展名、语法模式未设为React JSX、Emmet干扰未禁用，均导致class="后无响应。
Sublime Text 本身不解析 tailwind.config.js，也不运行 PostCSS 或 JIT 编译流程，所谓“类名自动补全”必须靠插件桥接——但不是所有插件都靠谱，装错或配错，class=" 后敲空格，光标就卡住不动。
用哪个插件？Tailwind CSS IntelliSense 还是 LSP-TailwindCSS？
两个主流方案，适用场景不同：
-
Tailwind CSS IntelliSense（bradlc 版）：轻量、开箱即用，适合纯 HTML/JSX 项目；依赖本地
tailwindcssCLI 可执行文件（v3.0+），但不启动语言服务器进程；对content字段路径敏感，不支持 glob 模式写法错误（如漏掉./或扩展名没写全） -
LSP-TailwindCSS + tailwindcss-server：更接近 VS Code 官方体验，支持 hover 查看定义、goto config、错误提示；但必须手动安装 language server（
npx tailwindcss-server --install），且 LSP 插件需在设置中显式启用"enabled": true和指定"settings"路径 - 二者不能共存——同时启用会触发冲突，补全菜单重复或失效
为什么 class=" 输入后没反应？常见断点排查
不是插件没装好，而是下面任一条件未满足，补全都不会触发：
- 项目根目录下没有
tailwind.config.js（或.cjs），或该文件导出方式不是module.exports = {...}（函数式导出module.exports = () => ({...})会被忽略） -
content字段未显式包含你写的模板文件路径，例如：content: ["./src/**/*.{html,jsx,tsx}"]—— 缺少.jsx扩展名，JSX 中的className就不会被扫描 - HTML 文件语法识别不对：右下角状态栏显示的是
HTML，但 JSX 文件默认是JavaScript，需手动设为React JSX；TSX 同理，要选TypeScriptReact - Emmet 干扰：输入
class="flex"后按空格，Emmet 会把它替换成flex="flex"；必须在Preferences → Package Settings → Emmet → Settings中禁用"attributes"相关规则，或全局关闭"enable_xml"
变体（dark:, hover:, group-hover:）补全不出来？配置没开全
插件默认只加载基础工具类，变体需要双重确认：
立即学习“前端免费学习笔记（深入）”；
- 在
tailwind.config.js的plugins数组里，确保有require('tailwindcss/plugin')({})类插件（如@tailwindcss/forms）没导致解析中断；variants字段在 v3+ 已废弃，变体由corePlugins控制，比如darkMode: 'class'必须存在，否则dark:不生效 - Tailwind CSS IntelliSense 用户设置中需加：
"includeVariants": true；LSP-TailwindCSS 则要在 LSP 设置里写："tailwindCSS.includeVariants": true - 补全触发时机：必须在引号内已输入至少 2 个字符（如
dark:te），单输dark:不会弹出列表；hover 类还需鼠标悬停目标元素存在（即 HTML 中有对应group或父容器）
最易被忽略的一点：插件读取 tailwind.config.js 是静态解析，改完配置必须重启 Sublime 或手动触发 “Reload Tailwind CSS IntelliSense” 命令（Ctrl+Shift+P → 输入该命令），否则新 theme 或自定义 spacing 依然不会出现在补全里。
