Resolve PostCSS 8 error when installing Tailwind CSS in Vue 3 (v3.2.10) (non-Vite, supports PostCSS 8)
P粉831310404
P粉831310404 2023-08-24 22:38:19
0
1
646
<p>I am using Vue version 3.2.10 <strong>not using Vite</strong> and trying to install Tailwind CSS version 2.2.14 (latest version). </p> <p><strong>Important: Vue supports PostCSS 8 starting with version 3.0.6</strong> (see updated point 3 in the GitHub documentation, under "features"). </p> <p>After carefully following the installation instructions, I keep getting the following error when running <code>npm run serve</code>: </p> <pre class="brush:php;toolbar:false;">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</pre> <p>This is my package.json file: </p> <pre class="brush:php;toolbar:false;">"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" }</pre> <p>As mentioned above, Vue 3.0.6 and above definitely support PostCSS 8. Additionally, the "<em>PostCSS 7 compatible build</em>" description for Tailwind CSS does not work.</p> <p>按照这些说明后,我收到以下错误:</p> <pre class="brush:php;toolbar:false;">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</pre> <p>感谢您的帮助!</p>
P粉831310404
P粉831310404

reply all(1)
P粉787806024

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).

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template