PostCSS Plugin errors with Rails 6 and TailwindCSS

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.

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.

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.

So here are some things I've done to get the newest version of Tailwind configured to work alongside PostCSS 8 on Rails 6.0.3.4

1. Make sure you are using the latest branch of Webpacker. According to the latest PR commits(as of 11/27/2020), we can see that someone has made updates to yarn.lock. You can do that by adding to your gemfile gem webpacker, git: 'https://github.com/rails/webpacker.git'
2. Make sure your package libraries are up-to-date. PostCSS relies on a few package dependencies, for example, postcss-loader and autoprefixer. Many of my packages were outdated and not supporting postcss8. To find out the latest versions of your packages, you can check out yarn.lock, to upgrade packages you can yarn upgrade postcss-loader --latest
3. For some reason, I discovered that autoprefixer^10 is not working with postcss 8 at the moment. However, you can use autoprefixer^9. yarn remove autoprefixer and then yarn add autoprefixer@^9
4. If you are still having trouble, then you should consider using the solution provided by the Tailwind team. It keeps you at postcss7 but, from what I can tell everything still works fine.

I had issues with a fresh Rails 6.1 RC1 app and Tailwind CSS 2. I installed PostCSS 8 but still received errors in the console. I eventually found this in the Tailwind CSS docs, the same link as Grant posted in his answer:

As of v2.0, Tailwind CSS depends on PostCSS 8. Because PostCSS 8 is only a few months old, many other tools in the ecosystem haven't updated yet, which means you might see an error like so:

Error: PostCSS plugin tailwindcss requires PostCSS 8.

To help bridge the gap until everyone has updated, we also publish a PostCSS 7 compatibility build under the compat channel on npm.

https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

I ran the following to install the PostCSS 7 compatible version of Tailwind CSS v2.0 using Yarn:

yarn add tailwindcss@comp

Once PostCSS 8 is more supported, we can switch back to tailwindcss@latest.

For reference, the errors I saw in the console were the following:

// Before upgrading PostCSS

Error: PostCSS plugin tailwindcss requires PostCSS 8.


// After upgrading to PostCSS 8

ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'config'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap? }

This is a very good walk through here

I have managed to skip fullhuman version of postcss and jit. And these are my dependencies in package.json (I use vue at FE):

"@rails/webpacker": "^5",
"autoprefixer": "^10",
"css-loader": "^5",
"node-sass": "^5.0.0",
"postcss": "^8",
"postcss-loader": "^4",
"sass-loader": "^10",
"tailwindcss": "^2",
"vue": "^2.6.12",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12",
"vue-turbolinks": "^2.2.2",
"vuex": "^3.6.2",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"

You will still get the error at this point. To get it to work important config/hack needs to be added to config/environment.js (credits to David Morales who wrote the article linked above):

function hotfixPostcssLoaderConfig (subloader) {
  const subloaderName = subloader.loader
  if (subloaderName === 'postcss-loader') {
    if (subloader.options.postcssOptions) {
      console.log(
        '\x1b[31m%s\x1b[0m',
        'Remove postcssOptions workaround in config/webpack/environment.js'
      )
    } else {
      subloader.options.postcssOptions = subloader.options.config;
      delete subloader.options.config;
    }
  }
}

environment.loaders.keys().forEach(loaderName => {
  const loader = environment.loaders.get(loaderName);
  loader.use.forEach(hotfixPostcssLoaderConfig);
});

This is because PostCSS uses a different Api structure in the version 8 so that's why this error occurs.

Then you can follow the tailwind set up instructions from their website or other articles.