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 tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^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/