CODEWITHSUNDEEP
reactjstailwind-css
Darkbound
Darkbound

Reputation: 3434

TailwindCSS in Create-React-App project, error requires PostCSS 8

I was given a create-react-app project with Tailwind in it, initially it was installed with the compatibility version for PostCSS 7 as per the official guide https://tailwindcss.com/docs/installation#building-your-css :

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

This installed:

"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"

Then, when trying to build the css, with:

tailwind build -i src/app/styles/tailwind.css -o src/app/styles/base.css

It gives the error:

node_modules\tailwindcss\peers\index.js:91395
    throw new Error('PostCSS plugin ' + plugin.postcssPlugin + ' requires PostCSS 8.\n' 
+ 'Migration guide for end-users:\n' + 'https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users');
          ^
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

So, then I have tried the other way, with updating tailwind, postcss and everything along with a craco config, again following the official guides:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Also installed craco as per the guide and created craco.config.js

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Doing it this way, building the css with:

tailwind build -i src/app/styles/tailwind.css -o src/app/styles/base.css

Is working, but then when I try to start the project with npm run craco start it fails to compile:

Failed to compile.

./node_modules/react-widgets/styles.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-widgets/styles.css)
Error: PostCSS plugin tailwindcss requires PostCSS 8.

Failed to compile.

./node_modules/react-widgets/styles.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-widgets/styles.css)
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

So I am stuck in a situation where I can either compile the project, but not the css, or compile the css, but not the project.

Upvotes: 5

Views: 4235

Answers (1)

Marinus Klasen
Marinus Klasen

Reputation: 418

I managed to complete a build by installing the following packages, copied from the TailwindCSS docs:

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

https://tailwindcss.com/docs/guides/create-react-app

From what I've found, create-react-app does not support PostCSS 8 yet, see:

Upvotes: 1

Related Questions