WebStorm识别不到tailwind.config.js，首要检查其是否位于项目根目录、是否用module.exports导出、是否为.cjs格式；需安装官方Tailwind CSS插件、关闭Power Save Mode、重启语言服务并确保content路径覆盖源文件。
WebStorm 识别不到 tailwind.config.js
WebStorm 不会自动加载 tailwind.config.js，除非它被明确关联到项目根目录或通过插件识别。你看到的类名无补全、Alt+Enter 不提示 Tailwind 相关操作，大概率是 WebStorm 根本没读到配置文件。
检查点如下：
-
tailwind.config.js必须位于项目根目录（如./tailwind.config.js），不能放在src/或config/下——否则 WebStorm 的 Tailwind 插件默认不扫描子目录 - 确保已安装官方插件：Settings → Plugins → 搜索 “Tailwind CSS” 并启用（不是 “Tailwind CSS Language Service”，那是旧版）
- 若用 TypeScript，确认
@types/tailwindcss已安装且tailwind.config.js顶部有正确类型声明：/** @type {import('tailwindcss').Config} */ - 重启 WebStorm（仅重载项目不够，插件初始化发生在启动时）
Alt+Enter 在 className 里不触发 Tailwind 补全
这个快捷键只在满足三个条件时才弹出 Tailwind 类名建议：光标落在 className 值内部、当前文件被识别为支持 JSX/TSX、WebStorm 确认该作用域下有可用的 Tailwind 类。
常见失效场景和对应动作：
- 光标停在引号外（如
className=|"或"text-lg"|）→ 无效；必须落在引号内，且不在已有类名中间（比如"text-|lg"也不行） - 文件后缀是
.js但写了 JSX → 进 Settings → Editor → File Types，把.js绑定到 “JavaScript JSX” 类型 - 用了非标准模板语法（如
class={cls("text-lg")}）→ WebStorm 只扫描字面量字符串，这种函数调用不会触发补全 - 类名本身拼错（如
tex-lg）→ WebStorm 不会纠错，只会基于已生成的 CSS 规则做匹配；先确认text-lg能在浏览器里生效，再查编辑器
类名有补全但运行时不生效
编辑器能识别 ≠ 浏览器能渲染。这是最易混淆的一环：WebStorm 的 Tailwind 支持纯属 IDE 功能，和构建流程完全解耦。你看到的补全、悬停提示、跳转定义，都不代表 text-lg 真的进了最终 CSS 文件。
此时要立刻转向构建侧验证：
- 打开浏览器 DevTools → Elements → 找到目标元素 → 查看 computed font-size 是否变化；若没变，说明 CSS 规则根本没生成
- 检查
tailwind.config.js中的content字段是否覆盖了当前文件路径（例如你在src/App.tsx写了className="text-lg"，但content只写了["./public/index.html"]，那必然失效） - 临时加一行
safelist: ["text-lg"]到配置中，重新构建；如果这时生效了，100% 是content扫描失败 - 确认构建命令（如
npx tailwindcss -i ./src/input.css -o ./dist/output.css）里没有硬编码绕过 config，或误传了--config参数指向错误路径
PostCSS 插件未启用导致 @tailwind 指令被忽略
WebStorm 不解析 @tailwind 指令，它只是语法高亮。真正决定这些指令是否起作用的是 PostCSS 构建链。如果 @tailwind utilities 这行在输出 CSS 里原样保留，说明 PostCSS 根本没调用 Tailwind 插件。
关键检查项：
- Vite 用户：确认
postcss.config.js含require('@tailwindcss/postcss')，不是require('tailwindcss')（后者是旧版，Vite 3.2+ 不兼容） - Webpack 用户：检查
css-loader配置中modules是否关闭——开启后类名会被哈希化，和 Tailwind 输出的原始类名对不上 - 任何用户：在终端运行
npx tailwindcss --version和npx postcss --version，确认两者版本兼容（Tailwind v3.4+ 要求 PostCSS ≥8.4） - 删掉
dist/或.cache/目录，重新构建——旧缓存可能让错误配置“看起来”生效
WebStorm 的 Tailwind 支持本质是“静态元数据映射”，它不参与构建、不读取 content 扫描结果、也不校验最终 CSS 输出。最容易被忽略的点是：你以为编辑器能提示，就等于项目跑通了——其实两者之间隔着整个 PostCSS 和 Purge 流程。
