应安装社区移植版Tailwind CSS IntelliSense(作者bradlc),它支持读取tailwind.config.js、识别theme.extend及dark:/hover:变体,但要求配置文件位于项目根目录、用module.exports导出、content字段显式包含扩展名,且需禁用Emmet干扰并正确设置语法作用域。

class=" 后光标停住,什么都不会出来。
用哪个插件?Tailwind CSS IntelliSense 是目前唯一靠谱选择
别搜“sublime tailwind”随便点安装——大量旧插件(如 sublime-tailwindcss)已停止维护,不支持 v3+ 配置、漏变体、不读 content 字段。官方推荐的 tailwindcss-intellisense 是 VS Code 扩展,Sublime 上可用的是社区移植版:Tailwind CSS IntelliSense(作者 bradlc,Package Control 可搜)。它能读 tailwind.config.js、识别 theme.extend、支持 hover:/dark: 变体,但前提是配置文件格式和路径都对。
tailwind.config.js 必须在项目根目录,且用 module.exports 导出
Sublime 插件不会递归查找配置文件,也不会执行 ESM 语法。常见失败原因就是配置放错位置或写法错误:
-
tailwind.config.js必须在你用 Sublime 打开的项目根目录(即subl .的那一层),不能在src/或config/子目录里 - 导出必须是
module.exports = { content: [...] },不是export default { ... },也不支持.cjs或.ts后缀 -
content字段必须显式列出模板扩展名,例如["./src/**/*.{html,js,jsx,ts,tsx}"],写成["./src/**/*"]会完全失效 - v4 的函数式配置
module.exports = (config) => ({ ... })不被识别,会静默降级为默认类名列表
HTML/JSX 中 class 提示不生效?检查语法作用域和 Emmet 冲突
插件默认只在 .html 文件中激活 class 补全。你在 .jsx、.tsx 或模板字符串里写 className="",得手动告诉插件哪些语言模式要支持:
- 打开
Preferences → Package Settings → Tailwind CSS IntelliSense → Settings - 填入:
{ "syntaxes": ["HTML", "JavaScript React", "TypeScript React", "Vue"] } - 禁用 Emmet 的 class 属性自动展开:打开
Preferences → Settings,加一行"emmet.excludeLanguages": ["html"],否则输入flex会被替换成flex="flex" - 补全触发方式不是
Ctrl+Space,而是在class="或className="后敲空格或双引号闭合,插件才开始扫描上下文
dark:hover: 等变体不提示?多半是 variants 字段残留或插件未启用 JIT 检测
v3+ 已移除 variants: {} 字段,但如果你的 tailwind.config.js 里还留着它,插件解析时会跳过整个配置,导致所有变体、自定义 spacing、screen 别名全部丢失:
立即学习“前端免费学习笔记(深入)”;
- 删掉配置里所有
variants相关字段(包括注释里的) - 确认
content路径下真有含dark:bg-gray-800或hover:text-blue-600的文件,插件靠静态扫描生成变体列表,不是靠运行时推导 - 如果用了
@apply,确保目标类名出现在content扫描范围内,否则@apply dark:bg-gray-800里的dark:也不会被识别 - 长 class 列表(比如超 20 个类)容易卡顿,可在插件设置里加
"maxCompletions": 50限制数量,或临时关闭补全
tailwind.config.js 里多了一行废弃的 variants,或者 content 路径里少写了 .tsx 扩展名——这两处改完,保存配置,不用重启 Sublime,等几秒就能看到提示弹出来。


















