Vue 3 PostCSS 8

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.

3 Likes

Did you find any solution to this?

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:

3 Likes

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:

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

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

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

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?

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"
  }

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”
}
}