Resolve PostCSS 8 error when installing Tailwind CSS in Vue 3 (v3.2.10) (non-Vite, supports PostCSS 8)
<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>
