webstorm 的 tailwind 智能提示需同时满足配置文件识别、语言服务激活与兼容性对齐；最常见问题是 tailwind.config.js 加载失败或 power save mode 开启，须用 tailwind.config.cjs + module.exports 导出、锁定 postcss@7 与 tailwindcss@2.1.4 兼容版本，并关闭节电模式。
WebStorm 的 Tailwind 智能提示不是“装了插件就自动好”，而是依赖配置文件识别 + 语言服务激活 + 兼容性对齐三者同时成立。缺一不可，且最容易卡在 tailwind.config.js 加载失败或 Power Save Mode 开启上。
tailwind.config.js 不被识别？检查导出方式和文件名
WebStorm 只认 tailwind.config.js 或 tailwind.config.cjs，不支持 .ts、.mjs 或 ES 模块语法（如 export default）。即使你用 TypeScript 写项目，也得改成 module.exports = { ... }。
- 删掉
tailwind.config.ts，新建tailwind.config.cjs，内容用module.exports = { content: [...] } -
content字段必须覆盖实际模板路径，Vue 项目漏写vue扩展名，React 项目漏写jsx或tsx，都会导致对应文件里无提示 - 如果项目根目录下有
tailwind.config.js但 WebStorm 没反应，右键该文件 →Reload project，或手动触发：菜单栏File → Reload project from disk
PostCSS 版本冲突导致提示中断？锁定 postcss@7 + tailwindcss@2.1.4 兼容组合
WebStorm 内置的 Tailwind 语言服务（截至 2026 年 3 月）仍深度依赖 PostCSS 7 生态。Vite/Next.js 新项目默认带 postcss.config.mjs 和 PostCSS 8+，会直接让提示失效。
- 卸载现有依赖：
npm uninstall tailwindcss postcss autoprefixer - 重装兼容版本：
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat@2.1.4 postcss@^7 autoprefixer@^9 - 确认
postcss.config.js存在且内容为module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } }，不要只写require('tailwindcss') - 删掉
node_modules和package-lock.json后重装，避免残留高版本缓存干扰解析
明明配置都对，还是没提示？先关 Power Save Mode，再重启语言服务
这是最常被忽略的“软开关”。WebStorm 的节电模式会全局禁用所有语言服务，包括 Tailwind 补全、跳转、甚至 class 属性内的语法高亮。
- 菜单栏点
File → Power Save Mode，确保前面没有勾选（有就点一下关掉） - 看右下角状态栏，找到
Language Service图标（类似 ⚙️ 或 ?），点击 →Restart Tailwind CSS Language Service - 如果是 Vue/React/JSX 项目，还要进
Settings → Languages & Frameworks → JavaScript → Libraries，勾选对应框架（如Vue.js），否则class属性内不触发补全
类名能补全，但悬停看不到 CSS 规则？这不是配置问题，是 WebStorm 当前限制
VS Code 的 bradlc.vscode-tailwindcss 插件支持悬停显示生成的 CSS 声明，而 WebStorm（2026 年 3 月最新版）仅支持类名补全、Ctrl+Click 跳转到配置项、以及基础的断点提示——它不渲染实时 CSS 预览。
- 别花时间排查“为什么没预览”，这不是你配错了，也不是插件没开，是 IDE 功能边界
- 验证是否真生效：在 HTML 或 Vue 模板中输入
text-，应立刻弹出text-red-500、text-lg等选项；输入md:text-应有响应式变体 - 若只有基础类名（如
flex）有提示，但自定义颜色/间距没出现，回头检查tailwind.config.cjs中theme.extend是否拼写正确、是否被包裹在合法对象结构里
真正卡住的人，往往反复改 content 路径却忘了关节电模式，或者执着于让 WebStorm 显示 CSS 预览而忽略了它本就不支持。把这三件事做实：文件名+导出方式对、PostCSS 版本锁死、节电模式关掉——提示大概率就回来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
