Resolve PostCSS 8 error when installing Tailwind CSS in Vue 3 (v3.2.10) (non-Vite, supports PostCSS 8)

Question

I am using Vue version 3.2.10 not using Vite and trying to install Tailwind CSS version 2.2.14 (latest version).

Important: Vue supports PostCSS 8 starting with version 3.0.6 (see updated point 3 in the GitHub documentation, under "features").

After carefully following the installation instructions, I keep getting the following error when running npm run serve:

error in ./src/assets/main.css

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

This is my package.json file:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/vue-fontawesome": "^3.0.0-4",
    "@headlessui/vue": "^1.4.1",
    "core-js": "^3.6.5",
    "date-fns": "^2.23.0",
    "firebase": "^8.9.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "autoprefixer": "^10.3.4",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.2.14"
  }

As mentioned above, Vue 3.0.6 and above definitely support PostCSS 8. Additionally, the "PostCSS 7 compatible build" description for Tailwind CSS does not work.

按照这些说明后，我收到以下错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: postcss@7.0.36
npm ERR! node_modules/postcss
npm ERR!   dev postcss@"^7" from the root project
npm ERR!   postcss@"^7.0.32" from autoprefixer@9.8.6
npm ERR!   node_modules/autoprefixer
npm ERR!     dev autoprefixer@"^9" from the root project
npm ERR!     autoprefixer@"^9.8.6" from @vue/cli-service@4.5.13
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.13
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR!       3 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex, the root project)
npm ERR!     1 more (tailwindcss)
npm ERR!   42 more (@intervolga/optimize-cssnano-plugin, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer postcss@"^8.0.0" from postcss-cli@8.3.1
npm ERR! node_modules/postcss-cli
npm ERR!   dev postcss-cli@"^8.3.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/mgav/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mgav/.npm/_logs/2021-09-08T21_09_08_052Z-debug.log

感谢您的帮助！

Answer 1

In some cases, the problem seems not to be directly related to VueJS, but to vue-cli.

The solution that worked for me was:

1. Update @vue/cli to "^5.0.0-beta.3" (previously "~4.5.0") - (Link on npm )
2. Update @vue/compiler to latest stable version - (link on npm - currently 3.2.11)
3. Even though I'm not using the postcss7-compat version, I followed the post's instructions to uninstall it via npm uninstall tailwindcss @tailwindcss/postcss7-compat.
4. Reinstall the latest versions of TailwindCSS, PostCSS and AutoPrefixer via npm install tailwindcss@latest postcss@latest autoprefixer@latest.

That's it!

Note: This is not my job. I was directed to this post on the Vuejs forum by Lindsay Wardell (@lindsaykwardell), where the solution was provided by Thomas Castelly (who also doesn't have a StackOverflow account).