Error: PostCSS plugin tailwindcss requires PostCSS 8

Question

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

score 93 · Accepted Answer · answered Nov 20 '20 at 08:26

93

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

answered Nov 20 '20 at 08:26

Saurabh

1,134
5
12

11

Vue 3 is one thing that does not yet have postcss 8 support. The guide above works great without hassle. – Jens Törnell Nov 23 '20 at 12:49
3

I get the following errors: `npm ERR! ERESOLVE unable to resolve dependency tree`,`npm ERR! Found: tailwindcss@2.0.2` Any help? – Pathros Dec 14 '20 at 04:43
I'm using Vue 3.0.7, which should have support for PostCSS 8, but I still get this error. My package-lock.json shows that the PostCSS is at v8.2.7, and I can't install the compat build because it conflicts with the PostCSS 8 requirement in @vue/compiler-sfc 3.0.7. – Peter Mghendi Mar 06 '21 at 08:05
2

I'm using Vue2, and this workaround doesn't work. – cjohnson318 Mar 14 '21 at 03:37
In my case I was using Yarn 2+, which also doesn't work. Downgrading Yarn for this project to 1 solved the problem. – Royal Aug 05 '21 at 19:22
Vue version 3.0.6 began supporting PostCSS 8 (see 3rd point in the GitHub documentation, under "features" at https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md#306-2021-02-24 ). Even so, I'm STILL having "Error: PostCSS plugin tailwindcss requires PostCSS 8" - this is a question on Stack at https://stackoverflow.com/q/69109763/1459653 – Mark Gavagan Sep 09 '21 at 13:47
that link seems to pointer no longer to anything related to compatibility anymore. – Jack May 10 '22 at 15:54

score 72 · Answer 2 · edited Mar 20 '21 at 01:20

72

npm uninstall tailwindcss postcss autoprefixer

then

vue add tailwind

to use the vue cli plugin https://www.npmjs.com/package/vue-cli-plugin-tailwind

edited Mar 20 '21 at 01:20

Hasip Timurtas

983
2
11
20

answered Mar 19 '21 at 16:37

Kemmie001

737
5
4

4

Confirmed working with latest Vue3 + Typescript. – Callam Delaney May 20 '21 at 21:38
Great for those using vue cli. I used vite procedure that was why I got that error. – Emmanuel David Oct 30 '21 at 21:49
1

This doesn't work for me. I'm getting `Cannot find module postcss-import` – The-null-Pointer- Dec 07 '21 at 08:48
@The-null-Pointer- I had the same error trying this solution. I Had to let the command generate a new tailwind.config.js, although I already had one. Then it worked. – DerHelge Aug 01 '23 at 11:45

score 62 · Answer 3 · edited Mar 06 '21 at 14:16

62

worked for me :

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

edited Mar 06 '21 at 14:16

aimme

6,385
7
48
65

answered Nov 22 '20 at 19:31

Khalid EDAIG

621
3
2

5

I get the following errors: `npm ERR! ERESOLVE unable to resolve dependency tree`,`npm ERR! Found: tailwindcss@2.0.2` Any help? – Pathros Dec 14 '20 at 04:42
1

thanks ,,, this is a live saver ,, fixed my issue with laravel breeze installation – Ahmed Osama Jan 10 '21 at 15:26
A thread on Tailwind's GitHub (sorry, no link) suggests each ```^``` may need to be escaped with an ```\``` before each instance of ```^``` – Mark Gavagan Sep 08 '21 at 18:16
1

Legend. I ran `npm uninstall tailwindcss postcss autoprefixer` first but this sorted it for me. Build was successful. Thanks a bunch! – HigherOrderMalfunction Mar 05 '22 at 15:17
Works well with Vue3 + TS – Atif Bashir Mar 19 '22 at 04:11

score 34 · Answer 4 · edited Oct 09 '22 at 17:19

34

This solution below should work perfectly.

Run the following commands. Remove the -D from the npm uninstall command if you originally installed tailwind etc as regular dependencies rather than dev dependencies.

npm uninstall -D tailwindcss postcss autoprefixer

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat  postcss@^7 autoprefixer@^9

edited Oct 09 '22 at 17:19

metadaddy

4,234
1
22
46

answered Jan 11 '21 at 10:49

jovialcore

601
1
5
13

The second line errors out with Error code E404... I'll edit your post to properly reflect what it should be, In future though, Be more explanative in your answers – Ricky Jan 18 '21 at 06:23
It's a good idea to install these with `--save-dev` or `-D` since they're only dev dependencies. – Soviut May 21 '21 at 07:18
Second line - npm ERR! Cannot read property 'name' of null – Arthur Shlain Feb 13 '22 at 19:05
The second line has an extra `@tailwindcss/postcss7-compat` that causes the problem. I'll edit the answer to remove it. – metadaddy Oct 09 '22 at 17:16

score 15 · Answer 5 · edited Feb 26 '21 at 22:01

15

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

edited Feb 26 '21 at 22:01

Edie Lemoine

169
2
8

answered Nov 29 '20 at 09:04

Theakash

195
4

they need to fix this thing soon. I ecnounter the same when I was trying to use it last week with vue cli project and today with parcelJS project. Thank you – B L Λ C K Nov 30 '20 at 16:10
1

A thread on Tailwind's GitHub (sorry, no link) suggests each ```^``` may need to be escaped with an ```\``` before each instance of ```^``` – Mark Gavagan Sep 08 '21 at 18:18

score 14 · Answer 6 · answered Mar 18 '21 at 02:13

14

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

answered Mar 18 '21 at 02:13

Jimba Tamang

1,275
15
17

2

For yarn 2, ```yarn add tailwindcss@npm:@tailwindcss/postcss7-compat@^2.0.2 postcss@^7 autoprefixer@^9``` – ThienSuBS Sep 29 '21 at 04:15

Mhammed Talhaouy · Answer 7 · 2021-05-26T18:23:09.460

12

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

edited May 26 '21 at 18:23

answered Jan 23 '21 at 13:21

Mhammed Talhaouy

1,129
10
14

If you run into issues, you may need to use our PostCSS 7 compatibility build instead. https://tailwindcss.com/docs/installation#post-css-7-compatibility-build – Hany Alsamman Apr 22 '21 at 20:33

score 12 · Answer 8 · answered Jul 31 '21 at 19:13

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

Not everyone is running storybook who's seeing this error (i'm one of them).... — Jon Madison, May 11 '22 at 21:58

score 8 · Answer 9 · answered Jan 25 '22 at 23:55

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

score 7 · Answer 10 · edited Jan 03 '22 at 19:45

7

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

edited Jan 03 '22 at 19:45

AnonymousUser

690
7
26

answered Jun 02 '21 at 22:22

Adetoro

79
1
2

This solution indeed worked for my environment. – tyshock Oct 16 '21 at 18:07
Does this fix the issue and allow for Tailwind 3? – Daniel ZA Dec 26 '21 at 11:06
4

It is getting ridiculous. 2022, and it is still kind of broken? – Andrei Drynov Jan 15 '22 at 22:59
There is no need to downgrade to `PostCSS 7`, you can now easily get this working with `PostCSS 8` - see https://stackoverflow.com/a/68605148/840897 – Aaron Feb 13 '22 at 19:56

score 5 · Answer 11 · answered Dec 16 '20 at 10:16

5

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.

answered Dec 16 '20 at 10:16

RedaMakhchan

482
3
9

score 4 · Answer 12 · answered Dec 29 '20 at 17:35

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 . . .

score 3 · Answer 13 · answered Dec 14 '20 at 10:03

3

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

answered Dec 14 '20 at 10:03

Arinzehills

1,491
10
14

This did not work for me on laravel 8, however this did: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build – domdambrogia Feb 05 '21 at 06:32

score 3 · Answer 14 · answered Dec 27 '21 at 07:19

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.

Yes this worked for me. thanks. also need to follow this steps if setup was done using postCSS previously. Right now need to use tailwindCLI to do the setup. `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.` https://tailwindcss.com/docs/upgrade-guide https://tailwindcss.com/docs/installation — Ram, Jan 19 '22 at 03:36

score 2 · Answer 15 · answered Apr 12 '21 at 20:23

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

score 1 · Answer 16 · edited Feb 08 '21 at 07:17

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.

Ram · Answer 17 · 2022-01-19T03:48:17.053

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

score 1 · Answer 18 · answered Jan 31 '22 at 10:44

1

This worked for me: running "npm install tailwindcss postcss" and "npm install tailwindcss autoprefixer"

this seperates installation of postcss and autoprefixer independently.

answered Jan 31 '22 at 10:44

David MD

39
3

score 1 · Answer 19 · answered May 27 '22 at 19:38

1

npm install tailwindcss@latest postcss@latest autoprefixer@latest

answered May 27 '22 at 19:38

Supapon Pick Pucknavin

473
4
9

score 1 · Answer 20 · answered Jun 28 '22 at 13:07

1

You gotta uninstall the tailwindcss, postcss, and autoprefixer and then install the compatible versions:

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

answered Jun 28 '22 at 13:07

alshafi

969
7
8

score 0 · Answer 21 · answered Jan 07 '21 at 01:07

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

score 0 · Answer 22 · answered Oct 31 '21 at 18:25

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.

score 0 · Answer 23 · answered Feb 04 '22 at 15:50

0

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

answered Feb 04 '22 at 15:50

Dylan Pierce

4,313
3
35
45

score 0 · Answer 24 · answered Apr 04 '22 at 14:38

0

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

answered Apr 04 '22 at 14:38

m yadav

1,783
2
11
13

score 0 · Answer 25 · answered May 26 '22 at 14:12

0

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

answered May 26 '22 at 14:12

Noor Khan

33
1
9

score 0 · Answer 26 · answered Jul 20 '23 at 10:14

0

Posting my solution in case someone has exhausted all the other answers mentioned here. I removed the tailwind.config.js file and re-created it with npm tailwindcss init and re-applied my modifications. Solved the issue for me!

answered Jul 20 '23 at 10:14

sbrk

1,338
1
17
25

Error: PostCSS plugin tailwindcss requires PostCSS 8

26 Answers26

Linked