Trouble Upgrading/Installing Tailwindcss 2.0 and Rails 6

PostCSS Loader has been initialized using an options object that does not match the API schema. Error when installing Tailwindcss 2.0 with Rails 6.

Trouble Upgrading/Installing Tailwindcss 2.0 and Rails 6

No need for a long intro - hopefully a solution for you and some good resources/links.


index.js:34 Uncaught Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
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? }
    at validate (Users/compy386/projects/keyboard-builder-directory/node_modules/postcss-loader/node_modules/schema-utils/dist/validate.js:104)
    at Object.loader (Users/compy386/projects/keyboard-builder-directory/node_modules/postcss-loader/dist/index.js:43)
    at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/dist/cjs.js?!./node_modules/sass-loader/dist/cjs.js?!./app/javascript/stylesheets/application.scss (index.js:34)
    at __webpack_require__ (bootstrap:19)
    at Object../app/javascript/stylesheets/application.scss (application.scss:2)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/application.js (application.js:10)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83
The error after running bin/webpack
Error in picture form

Made sure I installed tailwindcss compatibility mode - still wouldn’t work got the same error.

yarn add [email protected]:@tailwindcss/postcss7-compat [email protected]^7 [email protected]^9

I noticed if I removed my stylesheet import from my application.js webpack would compile correctly. Line 22 in my screenshot below.

I removed line 22 and everything worked fine!

What I realized was with Tailwindcss 1.0 I had an application.scss file but paying close attention to the docs and other examples online people were using the plain .css file extension for their application stylesheet.

So in app/javascript/stylesheets I renamed my application.scss file to application.css.

I renamed this from application.scss to application.css

After changing my file extension to .css everything fell into place and started to work.

I’m sure with if you need scss you can configure it to use scss, but for my use case I don’t need it.

I hope this helps!

Here are some links that helped me get to the bottom of this:

Installation - Tailwind CSS
Learn how to get Tailwind CSS up and running in your project.
PostCSS Plugin errors with Rails 6 and TailwindCSS
Have a new rails 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/

Subscribe to Mixed by Larry Scott

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]