Vue3未集成Tailwindcss执行npm run serve报模块缺失错误

• 数月前创建Vue项目时，曾通过vue add Tailwind命令集成Tailwindcss。
• 近期通过命令行执行vue create project，选择默认Vue3模板创建全新项目，切换到项目根目录后执行npm run serve启动项目，触发编译报错。

报错信息如下：

@ ./node_modules/vue-style-loader/index.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css 4:14-323 15:3-20:5 16:22-331
 @ ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css 1:0-381 1:0-381
 @ ./src/App.vue 5:0-62
 @ ./src/main.js 2:0-27 4:10-13

ERROR in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css)
Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "tailwindcss" plugin failed: Cannot find module 'tailwindcss'
Require stack:
- C:\Users\tools\Documents\Test3\testpro\node_modules\postcss-loader\dist\utils.js
- C:\Users\tools\Documents\Test3\testpro\node_modules\postcss-loader\dist\index.js
- C:\Users\tools\Documents\Test3\testpro\node_modules\postcss-loader\dist\cjs.js
- C:\Users\tools\Documents\Test3\testpro\node_modules\webpack\lib\ProgressPlugin.js
- C:\Users\tools\Documents\Test3\testpro\node_modules\progress-webpack-plugin\index.js
- C:\Users\tools\Documents\Test3\testpro\node_modules\@vue\cli-service\lib\commands\serve.js
- C:\Users\tools\Documents\Test3\testpro\node_modules\@vue\cli-service\lib\Service.js
- C:\Users\tools\Documents\Test3\testpro\node_modules\@vue\cli-service\bin\vue-cli-service.js

(@C:\Users\tools\Documents\Test3\testpro\src\components\HelloWorld.vue)
 @ ./node_modules/vue-style-loader/index.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css 4:14-354 15:3-20:5 16:22-362
 @ ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css 1:0-415 1:0-415
 @ ./src/components/HelloWorld.vue 5:0-81
 @ ./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js 2:0-52 7:4-14
 @ ./src/App.vue?vue&type=script&lang=js 1:0-122 1:0-122 1:123-234 1:123-234
 @ ./src/App.vue 2:0-54 3:0-49 3:0-49 8:49-55
 @ ./src/main.js 2:0-27 4:10-13

webpack compiled with 2 errors

• 异常现象：执行vue add Tailwind命令安装Tailwindcss依赖后，npm run serve可以正常运行，但当前新项目并不需要使用Tailwindcss，不确定本地配置哪里存在异常。

当前项目package.json配置如下：

{
  "name": "testpro",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@vue/cli-service": "~5.0.0"
  }
}

PostCSS加载配置时会递归向上遍历所有父目录查找配置文件，本次报错的根因是用户桌面目录下残留了之前项目生成的旧postcss.config.js配置文件，文件中配置了tailwindcss插件，而当前新项目没有安装tailwindcss依赖，因此触发插件加载失败的报错。

找到桌面目录下残留的冗余postcss.config.js配置文件并删除，之后重新执行npm run serve即可正常启动项目。

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