必须安装作者为bradlc的Tailwind CSS IntelliSense插件,其他如sublime-tailwindcss或Tailwind CSS Autocomplete均不兼容或已失效;插件仅识别项目根目录下的tailwind.config.js,且必须用module.exports导出、content字段显式声明扩展名,同时需配置additional_syntaxes支持JSX/TSX并禁用Emmet干扰。

装哪个插件才真正生效
只认 Tailwind CSS IntelliSense(作者 bradlc),别碰 sublime-tailwindcss 或 Tailwind CSS Autocomplete——前者已归档,后者遇到 v4 的 config({}) 函数式写法直接崩溃,连 theme.extend 都读不出来。
安装方式:按 Ctrl+Shift+P → 输入 Package Control: Install Package → 搜索并安装 Tailwind CSS IntelliSense。装完无需重启,但必须确保项目根目录存在 tailwind.config.js。
tailwind.config.js 放哪、怎么写才被识别
Sublime 插件不会向上查找或递归扫描,它只读你用 subl . 打开的那一层目录下的 tailwind.config.js。放错位置等于没配。
- 路径必须是项目根目录(即
subl .当前工作目录),不能在src/或config/子目录里 - 导出必须是
module.exports = { content: [] },不是export default {} - 不支持
.cjs或.ts后缀,只认tailwind.config.js -
content字段必须显式列出扩展名,例如:["./src/**/*.{html,js,jsx,ts,tsx}"];写成["./src/**/*"]会导致索引为空,补全静默失效 - 路径中不能含
../,必须是相对当前项目根的路径
为什么 JSX/TSX 里 className 没提示
插件默认只在 .html 文件中激活补全。你在 .jsx 或 .tsx 里写 className,不额外配语法作用域,就完全不触发。
立即学习“前端免费学习笔记(深入)”;
需手动添加配置项(Preferences → Package Settings → Tailwind CSS IntelliSense → Settings):
{
"class_attribute_regex": "(class|className|class:list)=\"([^\"]*)\"",
"additional_syntaxes": [
"Packages/React JSX/React JSX.sublime-syntax",
"Packages/TypeScript-TSX/TypeScriptReact.sublime-syntax"
]
}
additional_syntaxes 路径要和你本地 Sublime 实际安装的语法包名一致(可通过 View → Syntax → Open all with current extension as… 查看)。
Emmet 干扰导致补全失效
Emmet 默认会劫持 class= 和 className= 的双引号内输入,覆盖 Tailwind 补全逻辑。
解决办法:
- 临时禁用 Emmet:按
Ctrl+Shift+P→ 输入Emmet: Toggle Enabled关掉 - 或精准禁用干扰项:在
Preferences → Settings – User中加
"emmet.excludeLanguages": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
注意:这个设置必须加在用户级配置里,加在插件配置里无效。
Tailwind 类名补全是基于静态文件扫描 + AST 解析实现的,动态拼接(如className={`bg-${color}-500`})天然不支持,这点和 VSCode 行为一致,不是配置漏了,而是设计如此。


















