如何在VS中打开PHP项目时自动启动TailwindCSS

以下是几种无需手动输入命令就能自动启动TailwindCSS watch模式的方案：

方案1：通过VS Code任务自动触发 #

1. 先确保你的package.json里配置了watch脚本：

{
  "scripts": {
    "watch": "tailwindcss -i input.css -o style.css --watch",
    "build": "tailwindcss -i input.css -o style.css"
  }
}

2. 打开VS Code，按下Ctrl+Shift+B（Windows）或Cmd+Shift+B（Mac）打开任务面板，选择创建tasks.json文件，再选择npm作为模板。
3. 将生成的tasks.json内容替换为以下配置：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Tailwind Watch",
      "type": "npm",
      "script": "watch",
      "problemMatcher": [],
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

这样每次打开项目文件夹时，VS Code会自动启动Tailwind的watch进程。

方案2：使用VS Code扩展自动执行命令 #

1. 在VS Code扩展市场搜索并安装Auto Run Command扩展。
2. 打开扩展设置（快捷键Ctrl+,，搜索"Auto Run Command"）：
   • 找到Auto Run Command: Commands，点击编辑按钮，添加命令：npm run watch
   • 找到Auto Run Command: Run On，设置为folderOpen
3. 保存设置后，下次打开项目时就会自动执行watch命令。

方案3：配合工作区设置自动启动脚本 #

1. 先配置好package.json里的watch脚本（同方案1）。
2. 在项目根目录的.vscode文件夹中创建settings.json（如果没有的话），添加以下内容：

{
  "tasks.autoDetect": "on",
  "npm.scriptExplorer.defaultScript": "watch"
}

3. 再回到任务面板，将Tailwind Watch任务设置为默认任务（右键任务选择"设为默认任务"），这样打开项目时会自动触发该任务。

注意：所有方案都依赖你正确配置了package.json中的watch脚本，确保路径和参数与你的项目匹配。

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