必须安装作者为bradlc的Tailwind CSS IntelliSense插件,禁用sublime-tailwindcss和Tailwind CSS Autocomplete;需将tailwind.config.js置于项目根目录、用module.exports导出、content字段显式含扩展名,并配置additional_syntaxes和class_attribute_regex以支持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… 查看)。
为什么 class=" 后光标停住、什么都不出来
常见原因不是插件没装,而是三个关键点缺一不可:装对插件、配对 tailwind.config.js 路径、关掉 Emmet 干扰。
- Emmet 默认会劫持
class=展开,导致插件无法捕获输入事件。需禁用:Preferences → Package Settings → Emmet → Settings,加入:"disable_tab_abbreviations_on_html": true - 配置里避免
require('xxx')或同步文件读取(如fs.readFileSync),插件加载失败时不会报错,只会退化为默认类名集 - 若用 ESM(
export default),必须在package.json中加"type": "module",否则插件读取失败且无提示
最易忽略的是 content 路径漏写扩展名,以及 JSX/TSX 文件未绑定正确语法作用域——这两点导致的问题没有错误日志,只有“静默失效”。


















