WebStorm输入内容后Tailwind CSS自动补全建议消失如何解决？

1. 基础环境校验 #

• 确认项目根目录存在合法的Tailwind配置文件，文件名必须为tailwind.config.js/tailwind.config.ts，且配置中content字段匹配到了你正在编辑的文件路径
• 检查WebStorm版本是否支持你当前使用的Tailwind版本：Tailwind CSS v3要求WebStorm 2021.3及以上版本，更低版本需升级IDE
• 确认项目已安装tailwindcss依赖，可执行npm list tailwindcss/yarn list tailwindcss校验安装状态

2. IDE插件与配置检查 #

• 打开设置 > 插件，确认Tailwind CSS插件已启用，未被禁用
• 进入设置 > 语言和框架 > 样式表 > Tailwind CSS，检查配置项：
  • Tailwind CSS 包路径是否指向项目内的tailwindcss依赖包，未自动识别的话手动选择项目node_modules/tailwindcss目录
  • 配置文件路径是否正确指向项目根目录的Tailwind配置文件
  • 勾选启用 Tailwind CSS选项
• 检查是否安装了冲突的代码补全插件，例如第三方CSS类名补全插件，可暂时禁用后重启IDE测试

3. 缓存与索引修复 #

• 执行文件 > 清除缓存...，勾选清除文件系统缓存和本地历史记录后重启IDE，等待索引重建完成后测试补全
• 若仍失效，可手动删除项目的.idea目录，重新打开项目等待索引重建

4. 特殊场景修复 #

• 若在Vue/React等框架的自定义组件属性中补全失效，可在Tailwind配置文件中添加classAttributes配置，指定需要补全的属性名：

// tailwind.config.js
module.exports = {
  // 其他原有配置
  classAttributes: ['class', 'className', 'ngClass', 'customClass']
}

• 若输入时补全仅闪一下就消失，检查IDE的代码补全过滤设置：打开设置 > 编辑器 > 常规 > 代码补全，取消勾选仅显示与当前类型匹配的建议选项

内容的提问来源于stack exchange，提问作者Ale