Couple months ago i created a project with vue and added tailwindcss (Vue add Tailwind).

Now if i create a new Project over the cmd vue create project (default vue3 Template) I switch to the directory and npm run serve, this error appears:

If i run the command (vue add Tailwind) the npm run serve works without error, but i dont want to use Tailwind in this project? What is wrong with my settings?

 @ ./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

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"
  }
}

Solution:

There was a postcss.config.js file in my desktop directory, after i deleted it, npm run serve worked.

CodePudding user response：

If you don't wanna use tailwind you can remove it by following these steps:

1. Delete all the code in src/index.css.
2. Remove Tailwind from package.json.
3. Remove Tailwind from postcss.config.js

Run the following commands:

 // Install dependencies
  npm i
 // Start the development server
 npm run dev