PostCSS 8 Error When Installing Tailwind CSS in Vue 3 (v3.2.10) without Vite (PostCSS 8 is supported)

Question

I'm using Vue version 3.2.10 without Vite and trying to install Tailwind CSS version 2.2.14 (latest).

IMPORTANT: Vue version 3.0.6 began supporting PostCSS 8 (see 3rd point in the GitHub documentation for the update, under "features")

After carefully following installation instructions, then running npm run serve I keep getting this error:

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

Here 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 noted above, Vue 3.0.6 and beyond definitely support PostCSS 8. Also, the Tailwind CSS instructions for "PostCSS 7 compatibility build" do NOT work.

After following those instructions, I get this error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/postcss
npm ERR!   dev postcss@"^7" from the root project
npm ERR!   postcss@"^7.0.32" from [email protected]
npm ERR!   node_modules/autoprefixer
npm ERR!     dev autoprefixer@"^9" from the root project
npm ERR!     autoprefixer@"^9.8.6" from @vue/[email protected]
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
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 [email protected]
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

Thanks for your help!

Mark Gavagan · Accepted Answer · 2021-09-09 20:04:57Z

6

It seems the problem (in some cases, anyway) is not directly linked to VueJS, but vue-cli instead.

The solution that worked for me is:

Update @vue/cli to "^5.0.0-beta.3" (was on "~4.5.0") - (link to that on npm)
Updated @vue/compiler to latest stable - (link to that - 3.2.11 right now - on npm)
Even though I wasn't using the postcss7-compat version, I followed the post's instructions to uninstall via npm uninstall tailwindcss @tailwindcss/postcss7-compat
Reinstalled latest versions of TailwindCSS, PostCSS and AutoPrefixer via npm install tailwindcss@latest postcss@latest autoprefixer@latest

That's it!

Note: This is not my work. I was directed by Lindsay Wardell (@lindsaykwardell) to a post on this Vuejs forum with the solution by Thomas Castelly (also no StackOverflow handle).

edited Sep 9, 2021 at 20:04

answered Sep 9, 2021 at 18:17

Mark Gavagan

1,2321 gold badge19 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

flydev · Accepted Answer · 2021-09-10 17:34:05Z

1

There is no issue with the latest stable packages of vue-cli (v4.5.13 right now).

It look like that your issue is more about managing the dependencies (you should give a read on node.dev about this topic) as basically, to use TailwindCSS with the latest Vue3 stable version only require to install the latest version of the dependencies with few command lines and it work without the box.

As example, you will find below the instructions to create a minimal Vue3/Tailwind project which works as is:

$ vue create vue3-tailwindcss
$ cd vue3-tailwindcss
$ npm install -D @vue/compiler-sfc tailwindcss@latest postcss@latest autoprefixer@latest
$ npm run serve

Version of node and Vue :

$ node --version
v16.5.0
$ vue --version
@vue/cli 4.5.13

About your issue, you could have used the following method to get it working with with latest stables packages :

In package.json make theses changes :

"@vue/cli-service": "~4.5.0" => "@vue/cli-service": "^4.5.13"
"vue": "^3.0.0" => "vue": "^3.2.11"
"@vue/compiler-sfc": "^3.0.0" => "@vue/compiler-sfc": "^3.2.11"

Then remove the file package-lock.json and run npm install.

edited Sep 10, 2021 at 17:34

answered Sep 10, 2021 at 9:17

flydev

5,9003 gold badges39 silver badges45 bronze badges

2 Comments

Mark Gavagan Over a year ago

Thank you @flydev. I'm out of my depth and don't plan to mess with what's finally working. I'll wait regarding answers here to see what much more experienced users have to say.

flydev Over a year ago

I edited my answer for clarification - no problem - waiting for "experienced users" :)

Noxware · Accepted Answer · 2021-12-23 13:56:24Z

0

Easy solution without Vite.

You can start a new project using a newer version of Vue CLI. Just reinstall it like:

npm uninstall -g @vue/cli
npm install -g @vue/cli@next

And create a new Vue 3 project. It will support PostCSS 8 without any problem.

Then follow the Tailwind 3 installation guide using PostCSS. Don't forget to include your *.vue files in tailwind.config.js.

And you are ready to go.

Look at this repo I built as a guide.

answered Dec 23, 2021 at 13:56

Noxware

1293 silver badges8 bronze badges

Comments

Emilson · Accepted Answer · 2023-01-23 10:38:38Z

0

If you are having that same issue, uninstall tailwind CSS postcss and autoprefixer. See the command below:

npm uninstall tailwindcss postcss autoprefixer

Then install it with the command below :

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

answered Jan 23, 2023 at 10:38

Emilson

112 bronze badges

Collectives™ on Stack Overflow

PostCSS 8 Error When Installing Tailwind CSS in Vue 3 (v3.2.10) without Vite (PostCSS 8 is supported)

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related