使用Tailwind CSS时提示'postcss'不是内部或外部命令，该如何解决？

• 项目缺失必要依赖：Tailwind CSS的编译依赖postcss、postcss-cli等工具，当前项目未安装这些开发依赖，或安装过程中断导致依赖文件不完整
• 命令调用规则不匹配：package.json的scripts中直接使用postcss命令时，系统会优先检索全局安装的工具，若未全局安装postcss就会触发找不到命令的报错
• 依赖环境异常：node_modules目录损坏、包管理器缓存异常，也会导致已安装的可执行命令无法被识别

步骤1：安装必备开发依赖 #

在项目根目录下，按照你使用的包管理器执行对应安装命令：

• npm用户执行：
  npm install -D postcss postcss-cli autoprefixer tailwindcss
• yarn用户执行：
  yarn add -D postcss postcss-cli autoprefixer tailwindcss
• pnpm用户执行：
  pnpm add -D postcss postcss-cli autoprefixer tailwindcss

步骤2：修正scripts命令配置 #

打开项目根目录的package.json文件，给scripts中的postcss调用添加npx前缀，指定优先调用项目局部安装的依赖，避免全局安装的版本冲突问题：

{
  "scripts": {
    "watch:css": "npx postcss src/assets/tailwind.css -o src/assets/main.css --watch",
    "build:css": "npx postcss src/assets/tailwind.css -o src/assets/main.css",
    "start": "npm run watch:css && react-scripts start"
  }
}

步骤3：异常场景重置 #

如果完成上述两步后仍报相同错误，执行以下操作重置依赖环境：

• 删除项目根目录的node_modules文件夹
• 删除项目根目录对应的锁文件：package-lock.json（npm）/yarn.lock（yarn）/pnpm-lock.yaml（pnpm）
• 执行npm cache clean --force清除包管理器缓存
• 重新执行对应包管理器的安装命令（如npm install）安装全部依赖

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