Error: PostCSS plugin tailwindcss requires PostCSS 8
Javascriptnode.jsNpmTailwind CssJavascript Problem Overview
I installed the new tailwindcss version 2.0 and I've got the following error. I tried to uninstall postcss and tailwindcss but it does not work. Need help.
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
at new Processor (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
at postcss (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
at /Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/src/index.js:140:12
@ ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/util/SlideInfo.vue?vue&type=style&index=0&lang=css& 4:14-393 14:3-18:5 15:22-401
@ ./src/components/util/SlideInfo.vue?vue&type=style&index=0&lang=css&
@ ./src/components/util/SlideInfo.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Grades.vue?vue&type=script&lang=js&
@ ./src/views/Grades.vue?vue&type=script&lang=js&
@ ./src/views/Grades.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://172.20.12.3:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
Here is my package.json
"name": "nifo-school",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"react": "^16.3.0",
"@ivanv/vue-collapse-transition": "^0.2.1",
"autoprefixer": "^10.0.2",
"axios": "^0.21.0",
"core-js": "^3.6.5",
"electron": "^8.0.0",
"electron-drag": "^2.0.0",
"jquery": "^3.5.1",
"js-cookie": "^2.2.1",
"postcss-cli": "^=8.0",
"react-collapse": "^5.0.1",
"summernote": "^0.8.18",
"tailwindcss": "^2.0.1",
"v-click-outside": "^3.1.2",
"vue": "^2.6.11",
"vue-html-editor": "^0.2.1",
"vue-i18n": "^8.22.1",
"vue-router": "^3.2.0",
"vue2-editor": "^2.10.2",
"vuex": "^3.5.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-airbnb": "^5.0.2",
"babel-eslint": "^10.1.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "^6.2.2",
"lint-staged": "^9.5.0",
"node-sass": "^4.12.0",
"postcss": "^=8.1",
"sass-loader": "^8.0.2",
"vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
"vue-template-compiler": "^2.6.11"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue}": [
"vue-cli-service lint",
"git add"
]
}
}```
Thanks for help
Javascript Solutions
Solution 1 - Javascript
You're integrating Tailwind with a tool that relies on an older version of PostCSS. You can use this doc https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
Solution 2 - Javascript
npm uninstall tailwindcss postcss autoprefixer
then
vue add tailwind
to use the vue cli plugin https://www.npmjs.com/package/vue-cli-plugin-tailwind
Solution 3 - Javascript
worked for me :
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Solution 4 - Javascript
This solution below should work perfectly.
Run the following commands
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
EDIT: Removed some erranous spaces.
Solution 5 - Javascript
Uninstall Tailwind and re-install using the compatibility build instead
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Solution 6 - Javascript
I was getting dependency tree error when I try uninstall and install with compact version. So I had to install with yarn
instead and it works.
npm uninstall tailwindcss postcss autoprefixer
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Solution 7 - Javascript
you have to uninstall
all these
npm uninstall autoprefixer postcss tailwindcss
Then run this command, it's will generate tailwind.css
file automatically
vue add tailwind
Solution 8 - Javascript
The accepted answer is now out of date.
As of v2.0, Tailwind CSS depends on PostCSS 8. The previously accepted answer states how to downgrade to PostCSS 8
Instead please do the following to get everything running on all the latest versions
yarn add @storybook/addon-postcss
Then edit your .storybook/main.js
module.exports = {
stories: [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
{
name: "@storybook/addon-postcss",
options: {
postcssLoaderOptions: {
implementation: require("postcss"),
},
},
},
],
};
https://storybook.js.org/addons/@storybook/addon-postcss
@dlporter98
Solution 9 - Javascript
To resolve this error, uninstall Tailwind and re-install using the compatibility build instead:
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Solution from Tailwind documentation v2
Solution 10 - Javascript
The above solution fixed TaildWindCss PostCss issue, but I faced another error, which is :
TypeError: getProcessedPlugins is not a function
The Solution for is to upgrade Node version, in my case I upgraded from v10 to v15 which fixed my issue.
Solution 11 - Javascript
Oddly I had this issue on one dev machine . . . but not the other, with identical package.json file, and using identical node/npm (15.5/7.3). I deleted node_modules, reinstalled. Did not fix it.
Final fix, which is bizarre, is after the node module reinstall, all I did was:
npm uninstall tailwindcss
then
npm i tailwindcss --save-dev
(note, not using the compatibility package) and it worked fine. I do have to use --legacy-peer-deps
when re-installing the node_modules, so somehow the order of installation mattered in my scenario . . .
Solution 12 - Javascript
I got the same issue using laravel 8, So Try uninstalling tailwind using "npm uninstall tailwindcss" and install it back using
npm install tailwindcss@compat
then run "npx tailwindcss init" if you don't have the tailwing.config.js file
after then run npm run watch.
still follow up the laravel documentation for more when you get stuck https://laravel.com/docs/8.x/mix#tailwindcss
Solution 13 - Javascript
For those upgrading to Tailwind 3, and experiencing this issue, the following instructions from Tailwind's own troubleshooting are what fixed it for me.
Specifically, changing your start and build scripts:
"start": "concurrently \"npm run start:css\" \"react-scripts start\"",
"start:css": "tailwindcss -o src/tailwind.css --watch",
"build": "tsc && npm run build:css && react-scripts build",
"build:css": "NODE_ENV=production tailwindcss -o src/tailwind.css -m",
You'll have to install concurrently
and npm-run-all
, though.
The following is my postcss.config.js
:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
This will mean that you'll have to import tailwind.css
instead of index.css
in your index file index.{tsx,js}
for the project.
And if this worked for you, keep in mind you might no longer need @craco/craco
installed.
Solution 14 - Javascript
I'm on a Mac using VueJS 3 (@vue/cli 4.5.11). For me the following two commands solved the issue:
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
This installed:
- tailwindcss 2.1.1
- postcss 8.2.10
- autoprefixer 10.2.5
Solution 15 - Javascript
With Vue 3 and Tailwindcss 3
- Create
tailwind.config.js
- Create
postcss.config.js
- Add following in
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {
config: './tailwind.config.js'
}
}
}
The above configuration works fine with latest postcss, autoprefixer, vue 3 and tailwind 3
Solution 16 - Javascript
This worked for me: running "npm install tailwindcss postcss" and "npm install tailwindcss autoprefixer"
this seperates installation of postcss and autoprefixer independently.
Solution 17 - Javascript
Had the same issue and did the following to resolve;
- Check your npm version using npm -ver, and make sure to install the latest version
- Also check your Node version and update to the latest version through this URL: "https://nodejs.org/en/download/"
Solution 18 - Javascript
I tried everything and was still having TypeError: getProcessedPlugins is not a function
error. What fixed the issue for me was upgrading the nodejs version.
To check the installed node version
node -v
my node version was v10.23.0
and was using Ubuntu. I upgraded to v14.15.4
.
Here is how I upgraded node
sudo apt update
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
sudo apt-get install -y nodejs
node -v
also I cleaned the cache to be more sure
npm cache clean -f
After upgrading I deleted node_modules folder inside project. ran npm install
and then ran npm run dev
inside the project folder.
This is the only solution that worked for me, so sharing it.
Solution 19 - Javascript
While not using Vue, I hope this helps others with a similar issue. In my case, I was using TailwindCSS with Gulp (^4.0.2) and was able to solve the error by removing tailwind and its dependencies:
npm uninstall tailwindcss gulp-postcss autoprefixer
Then installed them again but explicitly specified the postcss plugin as version 9:
npm install tailwindcss autoprefixer gulp-postcss@9
I tried with gulp-postcss@latest
, but found it kept installing version 8.3.1 and didn't resolve the error. More information can be seen here: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
Otherwise, I would echo the use of the Tailwind compatibility version.
Solution 20 - Javascript
I also faced this issue while upgrading. previously I done the setup using postCSS.
official documentation says
Note that Tailwind CSS v3.0 requires PostCSS 8, and no longer supports PostCSS 7. If you can’t upgrade to PostCSS 8, we recommend using Tailwind CLI instead of installing Tailwind as a PostCSS plugin.
So this time i done the setup using cli. https://tailwindcss.com/docs/installation
-
yarn remove tailwindcss postcss autoprefixer
yarn add --dev tailwindcss@latest @tailwindcss/typography@latest @tailwindcss/forms@latest @tailwindcss/aspect-ratio@latest @tailwindcss/line-clamp@latest postcss@latest autoprefixer@latest
-
npx tailwindcss -i ./src/assets/css/style.css -o ./src/assets/css/tailwind.css --watch
And in package.json need to do this change
https://tailwindcss.com/docs/content-configuration#it-just-isn-t-working-properly
my package.json
"start": "concurrently \"npm run start:css\" \"react-scripts start\"",
"start:css": "tailwindcss -o src/assets/css/tailwind.css --watch",
"build": "tsc && npm run build:css && react-scripts build",
"build:css": "NODE_ENV=production tailwindcss -o src/assets/css/tailwind.css -m",
This answer helped me to resolve the issue https://stackoverflow.com/a/70492649/7225816
Solution 21 - Javascript
Yarn equivalent for those who are stuck with PostCSS v8 due to using a framework like Vuepress v1:
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Solution 22 - Javascript
Just uninstall Tailwind and re-install using the compatibility build instead:
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9