VS Code中Tailwind仅在一个Phoenix项目中自动补全可用

核心排查与修复步骤 #

Tailwind自动补全依赖Tailwind CSS IntelliSense扩展的正确配置，以及项目本身的Tailwind设置，以下是针对性的解决方法：

• 检查工作区Tailwind配置
  打开有问题的项目，按Ctrl+,打开设置，切换到「工作区」标签：

  1. 搜索tailwindCSS.config，确认路径指向项目的assets/tailwind.config.js（Phoenix 1.7+默认位置）
  2. 搜索tailwindCSS.includeLanguages，添加.heex文件的语言映射：

     "tailwindCSS.includeLanguages": {
       "heex": "html"
     }
     

• 验证Tailwind配置文件内容
  对比能正常工作的项目，重点看tailwind.config.js里的content数组，必须包含你的模板文件路径，确保Tailwind能扫描到需要样式的文件：

  module.exports = {
    content: [
      "./js/**/*.js",
      "../lib/**/*.ex",
      "../lib/**/*.heex" // 必须包含Heex模板路径
    ],
    // 其他配置...
  }
  

• 确认工作区信任状态
  克隆的项目可能被VS Code标记为「非信任工作区」，限制扩展功能。点击左下角的「信任」按钮，授权该工作区的扩展权限。

• 重启Tailwind语言服务
  按Ctrl+Shift+P，输入Tailwind CSS: Restart Language Server，手动重启扩展的语言服务，修复可能的进程异常。

• 添加本地工作区设置
  在项目根目录创建.vscode/settings.json，写入以下配置覆盖全局设置：

  {
    "tailwindCSS.config": "${workspaceFolder}/assets/tailwind.config.js",
    "tailwindCSS.includeLanguages": {
      "heex": "html"
    },
    "editor.quickSuggestions": {
      "strings": true
    }
  }
  

• 检查项目依赖
  进入项目assets目录，运行npm install（或yarn install），确保Tailwind相关依赖已正确安装——IntelliSense需要本地依赖来识别可用样式类。

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