Vue 3 PostCSS 8

Get Help
#1

Hi!

Up until now I’ve been using Tailwind 2 using the PostCSS 7 compatibility build.

However, because Vue 3.0.6 now supposedly supports PostCSS 8, I’ve been trying to get rid of the compatibility build. I’ve upgraded all my packages, removed the compatibility package, even tried removed my node_modules and yarn.lock, but it will simply not work. It’s still complaining that PostCSS 8 is required.

Are there still parts of Vue 3 that do not support PostCSS 8? If so, are there any issues to track them? All issues I’ve found so far seem to be fixed after the 3.0.6 release.

4 Likes
#2

Did you find any solution to this?

#3

Hello,

I think it’s not directly linked to VueJS, but vue-cli. Please try this versions:

"@vue/cli-service": "^5.0.0-alpha.5",

Btw, I updated all ‘@vue/…’

"@vue/cli-plugin-babel": "^5.0.0-alpha.5",
"@vue/cli-plugin-eslint": "^5.0.0-alpha.5",
"@vue/cli-plugin-router": "^5.0.0-alpha.5",
"@vue/cli-plugin-typescript": "^5.0.0-alpha.5",
"@vue/cli-plugin-unit-jest": "^5.0.0-alpha.5",
"@vue/cli-service": "^5.0.0-alpha.5",

Now I guess you used compat, you can remove it:

npm uninstall tailwindcss @tailwindcss/postcss7-compat
npm install tailwindcss@latest postcss@latest autoprefixer@latest

It works for me, I hope it will help you :slight_smile:

4 Likes
#5

Oh, thanks! I will try that out. I did actually try the alpha of cli-service 5 when I first tried this, but it was yelling about some missing babel package. I will try upgrading the cli-plugin-packages as well. That might be the key :slightly_smiling_face:

#6

Thanks a lot - this indeed was the solution :slight_smile:

#7

I stole this answer and posted it on StackOverflow and the TailwindCSS GitHub discussion regarding the PostCSS 8 error. Thanks!!!

#8

This is fast becoming the bane of my existence, as I simply cannot run Tailwind 3,the solution provided of using:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Still results in:

Syntax Error: Error: PostCSS plugin autoprefixer requires PostCSS 8.

This means something else is causing the issue, or just it may be a case of my ignorance standing in the way of progress.

2 Likes
#9

I got the same problem… Literary just tyring to learn postcss. I installed

npm install postcss-preset-env

then in config postcss.config.js

module.exports = {
  plugins: [
    //require("autoprefixer"),
    require("postcss-preset-env"),
  ],
};

or

module.exports = {
  plugins: {
    "postcss-preset-env": { stage: 1 },
  },
};

or .postcssrc.josn

{
  "plugins": {
    "postcss-preset-env": {}
  }
}

and the error is shown

Error: PostCSS plugin postcss-preset-env requires PostCSS 8.

I have checked the postcss folder and it showed the 8+ version in it. Do i need to hack my way around it to be able to use postcss plugins in vuejs project?

#10

I Dumped VueJS last year (2021) cause i had problems with the Post CSS i want to use tailwind v3.
Now its 2022 why is this still not fixed.

Still having errors

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.

my package.json

"dependencies": {
    "autoprefixer": "^10.4.2",
    "core-js": "^3.6.5",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.15",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@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",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2"
  }
2 Likes
#11

Ok so after Hours and Hours of trying to hack my way to use Tailwind3 with VueJS3 + Vue CLI
i failed miserably

So instead I’m using Vite + VueJS3 + Tailwindcss 3.

I really wanted to use the VueJS Ecosystem including the VueCLI
but there is really a problem with how VueCLI communicates with POSTCSS8.

{
“name”: “vuejs_vite”,
“version”: “0.0.0”,
“scripts”: {
“dev”: “vite”,
“build”: “vite build”,
“preview”: “vite preview”
},
“dependencies”: {
“@vue/compiler-sfc”: “^3.2.27”,
“autoprefixer”: “^10.4.2”,
“postcss”: “^8.4.5”,
“tailwindcss”: “^3.0.15”,
“vue”: “^3.2.25”,
“vue-router”: “4”,
“vuex”: “^4.0.2”
},
“devDependencies”: {
“@vitejs/plugin-vue”: “^2.0.0”,
“vite”: “^2.7.2”
}
}

#12

Yes, it’s still not fixed. I struggled with this problem for two days and gave up.

#13

I have noticed that all versions from cli-service and its plugins below alpha.8 are not causing this error, but something was introduced in the betas.

So in the dev dependencies of package-json, make sure you only have those or lower.
“@vue/cli-plugin-router”: “^5.0.0-alpha.8”,
“@vue/cli-plugin-vuex”: “^5.0.0-alpha.8”,
“@vue/cli-service”: “^5.0.0-alpha.8”,

Note that in my package-lock.json:
“node_modules/autoprefixer”: is at “version”: “10.4.13”,
“node_modules/postcss”: is at “version”: “8.4.21”,
“node_modules/postcss-loader”: is at “version”: “6.2.1”,
“node_modules/postcss-value-parser”: is at “version”: “4.2.0”,

Nevertheless, the cli-service refuses to serve if not in alpha.8.

1 Like