React+Vite项目中Tailwind CSS Intellisense自动补全失效求助

环境信息 #

• Visual Studio Code Insider v1.100.0-insider
• Tailwind CSS Intellisense v0.14.15
• Tailwind CSS v3.4.17（通过npm安装）
• Windows 11 64位系统

当前Tailwind配置文件 #

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Roboto", "sans-serif"],
      },
      gridTemplateColumns: {
        "70/30": "70% 28%",
      },
    },
  },
  plugins: [],
};

复现步骤 #

1. 执行npm create vite@latest创建Vite项目
2. 执行npm install -D tailwindcss@3 postcss autoprefixer安装开发依赖
3. 执行npx tailwindcss init -p初始化Tailwind及PostCSS配置
4. 修改Tailwind配置文件为以下内容：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. 在React JSX的className属性或HTML的class属性中输入Tailwind类名，自动补全功能无法正常触发

解决方法 #

1. 确认工作区信任状态
   VS Code对未信任的工作区会限制部分扩展功能，检查左下角是否显示"不受信任"，如果是，切换为信任工作区。

2. 重启Tailwind语言服务
   按Ctrl+Shift+P打开命令面板，输入Tailwind CSS: Restart Tailwind CSS Language Server执行，服务挂起是补全失效的常见原因，重启即可修复。

3. 核对content路径配置
   确保content数组中的路径与项目实际文件结构完全匹配，比如如果有未被./src/**/*.{js,ts,jsx,tsx}覆盖的特殊目录，需补充到规则中。

4. 排查扩展冲突
   暂时禁用其他CSS相关扩展（如Stylelint、CSS Peek等），部分扩展会与Tailwind IntelliSense存在解析冲突，导致补全失效。

5. 更新编辑器与扩展
   将Visual Studio Code Insider和Tailwind CSS Intellisense扩展更新至最新版本，新版本通常会修复已知的兼容性bug。

6. 检查PostCSS配置
   确认项目根目录的postcss.config.js正确配置了Tailwind插件，标准配置如下：

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

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