1

I'm building an app using vuejs3 and tailwindcss
I was testing some configurations before starting the project then I got this error
npm run build throws:

ERROR  Failed to compile with 1 error                                2:48:15 PM

 error  in ./src/styles/index.css

Error: PostCSS plugin postcss-purgecss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users


 @ ./src/main.js 9:0-28
 @ multi ./src/main.js

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-vue-env@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the test-vue-env@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

And here is my devDependencies in package.json:

{
    "devDependencies": {
        "@fullhuman/postcss-purgecss": "^4.0.0",
        "@fullhuman/vue-cli-plugin-purgecss": "~4.0.2",
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-plugin-vuex": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/compiler-sfc": "^3.0.0",
        "@vue/eslint-config-prettier": "^6.0.0",
        "autoprefixer": "^10.2.5",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-prettier": "^3.1.3",
        "eslint-plugin-vue": "^7.0.0-0",
        "node-sass": "^5.0.0",
        "postcss": "^8.2.8",
        "prettier": "^1.19.1",
        "sass-loader": "^10.1.1",
        "tailwindcss": "^2.0.3"
    }
}

Thanks for your time !

Amir Sarfar
  • 153
  • 2
  • 11
  • Does this answer your question? [Error: PostCSS plugin tailwindcss requires PostCSS 8](https://stackoverflow.com/questions/64925926/error-postcss-plugin-tailwindcss-requires-postcss-8) – juliomalves Mar 11 '21 at 20:56
  • OP does not list react. create-react-app what makes you run postcss 7 and tailwindcss with postcss-7-compat. – James Wagoner Jun 02 '21 at 02:02

3 Answers3

1

According to the official docs you should do:

npm uninstall tailwindcss postcss autoprefixer

then

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Note : to avoid any issue you could delete the package-lock.json then run the commands above.

Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
  • I know what you are saying but my problem is not with `tailwind` its with the `postcss-purgecss` and my postcss version is 8 – Amir Sarfar Mar 12 '21 at 07:10
  • please share your tailwind.config.js file – Boussadjra Brahim Mar 12 '21 at 10:09
  • 1
    According to the comments here https://github.com/tailwindlabs/tailwindcss/discussions/3575 you may need to escape ^ by adding \ before each instance, so the code would be ```npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@\^7 autoprefixer@\^9``` – Mark Gavagan Sep 08 '21 at 13:58
1

OP does not list react in the dependencies. Those documentation links deal with create-react-app that makes you run postcss@^7 and tailwindcss with postcss-7-compat release.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest will build just fine with Vue 3.

I suggest you remove the two @fullman packages, kill your package.lock (assuming using npm vs yarn) and node_modules folder and run npm install again. postcss and tailwindcss packages will pull in the proper postcss-purgecss package.

Post your tailwind config and your builder config (webpack, rollup, gulp, etc) if you are still having issues.

James Wagoner
  • 323
  • 4
  • 11
-1

It is because tailwind does not support postcss version 8 as of now (I am talking about tailwind compat). You can found out more about this on this official link from tailwind. Basically it says that, postcss 8 is not supported by other libraries and therefore, tailwind uses postcss7-compat until more people start using postcss 8.

Haider Ali
  • 41
  • 1
  • 6