必须安装官方插件tailwind css intellisense(作者bradlc),确保tailwind.config.js在项目根目录、module.exports导出、content显式声明扩展名、jsx/tsx文件关联正确语法模式,并禁用emmet干扰。

装哪个插件才真正生效
只认 Tailwind CSS IntelliSense(作者 bradlc),别碰 sublime-tailwindcss 或 Tailwind CSS Autocomplete——前者已归档不维护,后者遇到 v4 的 config({}) 函数式写法直接崩溃,连 theme.extend 都读不出来。
安装方式固定:按 Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(macOS)调出命令面板 → 输入 Package Control: Install Package → 回车 → 搜索并安装 Tailwind CSS IntelliSense。
安装后无需重启 Sublime,但插件启动依赖 Node.js ≥14.0.0,终端执行 node -v 可验证。
tailwind.config.js 放哪、怎么写才被识别
插件不会向上查找或递归扫描,它只读你用 subl . 打开的那一层目录下的 tailwind.config.js。放错位置等于没配。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
-
tailwind.config.js必须在项目根目录,不能放在src/或config/下 - 导出必须是
module.exports = { content: [] },不是export default - 若用 ESM(
export default),需在package.json中加"type": "module",否则插件加载失败且无报错 -
content字段必须显式列出扩展名,例如:["./src/**/*.{html,js,jsx,ts,tsx}"];写成["./src/**/*"]会导致索引为空,补全静默失效 - 路径中不能含
../,必须是相对当前项目根的路径
为什么 JSX/TSX 里 className 没提示
插件默认只在 .html 文件中激活补全。你在 .jsx 或 .tsx 里写 className,不额外配语法作用域,就完全不触发。
解决办法是手动关联语法:
- 打开一个
.jsx文件 → 点击右下角当前语法名称(如JavaScript)→ 选择Open all with current extension as…→ 选JavaScript (React)或TypeScript React - 确保
additional_syntaxes已启用(部分版本需在插件设置里手动开启) - 若仍无效,检查是否启用了 Emmet —— 它会劫持
class="输入,必须在Preferences → Settings中禁用:"emmet_triggers_on_tab": false,或直接关掉 Emmet 插件
常见静默失效的坑
插件加载失败时几乎不报错,只会退化为默认类名集,导致你反复检查却找不到原因。
-
tailwind.config.js里写了require('xxx')或fs.readFileSync?删掉。这些同步操作会让插件加载中断 - 配置里用了
await或顶层async?不支持,会静默失败 - 文件路径用了绝对路径或
../?插件拒绝解析 - 用了
.cjs或.ts后缀?插件只认tailwind.config.js - 项目用了 JIT 模式但没在
content中覆盖所有模板路径?JIT 依赖静态扫描,漏路径 = 漏提示
最麻烦的是:JSX/TSX 文件语言模式不对 + content 路径漏扩展名 + Emmet 干扰,这三者常同时存在,修复时得逐项排除,而不是只改一个地方。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










