PostCSS Plugin errors with Rails 6 and TailwindCSS

Question

Have a new rails 6.0.3.4 application which was using TailwindCSS version 1.9. Having just attempted to upgrade to the latest TailwindCSS release I'm getting the following errors:

ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)

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

This error persisted when attempting to run

bin/webpack

Couldn't find any information on how to upgrade to PostCSS version 8.

Answer 1

yarn remove tailwindcss

yarn add tailwindcss@compat

bin/webpack

This fixed things for me and let me use tailwindcss 2. Tailwind have released a version that is compatible with PostCSS7.

Answer 2

Solved the issue in a couple of steps.

1. Followed the TailwindCSS installation instructions https://tailwindcss.com/docs/installation

The first suggestion was to use the command

npm install tailwindcss postcss autoprefixer

But then still got the essential error of

Error: PostCSS plugin tailwindcss requires PostCSS 8.

There seems no way to resolve this issue currently

2. Used further instructions form the TailwindCSS installation guide https://tailwindcss.com/docs/installation#postcss-7-compatibility-build

The process was to then apply the following commands:

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@compat postcss@^7 autoprefixer@^9

which then downgraded the PostCSS and autoprefixer components and then when bin/webpack was re-run finally success.

Answer 3

I was having issues getting this to work in production on Heroku. I tried the existing yarn answers but neither of them worked for me.

What worked for me was:
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Once I committed and pushed package.json and yarn.lock it compiled happily.

That command is lifted from this helpful Rails/Tailwind tutorial.