Rails Tailwind Setup: Module build failed (from ./node_modules/postcss-loader/src/index.js):

Question

I was following this tutorial (https://web-crunch.com/posts/how-to-install-tailwind-css-using-ruby-on-rails) for setting up tailwind in a rails app. I am using rails 6.1.3.1 and ruby 3.0.1.

My CSS seems not to load despite I followed all steps. When I inspect (chrome dev tools) my console, the following error is displayed:

Uncaught Error: Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: ENOENT: no such file or directory, open '/app/javascript/stylesheet/tailwind.config.js'

Any idea what could be the reason?

Here is my postscss.config.js file:

let environment = {
  plugins: [
    require('tailwindcss')('./app/javascript/stylesheets/tailwind.config.js'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
};

// Add everything below!
if (process.env.RAILS_ENV === 'production') {
  environment.plugins.push(
    require('@fullhuman/postcss-purgecss')({
      content: [
        './app/**/.html.erb',
        './app/helpers/**/*.rb',
        './app/javascript/**/*.js',
        './app/javascript/**/*.jsx',
      ],
      defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || []
    })
  )
}

module.exports = environment;

And here is my tailwind.config.js file:

module.exports = {
  purge: [
  './app/**/*.html.erb',
  './app/helpers/**/*.rb',
  './app/javascript/**/*.js'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Is tailwind.config.js located in app/javascript/stylesheet/ ? Do you have the same config for postcss as in that tutorial? Maybe you are missing that dot './app' — razvans
@razvans you mean app/javascript/stylesheets/ correct? In plural i mean. Regarding the second part of your question I added the postscss file above in my post. — Sabrina
The error you pasted has app/javascript/stylesheet, postscss has app/javascript/stylesheets in plural. Where does that stylesheet, singular, comes from? — razvans

Sabrina Sabrina · Accepted Answer · 2021-04-21T10:14:59

I just solved it myself and am happy to share: you have to change stylesheets into stylesheet here:

in application.js: import "stylesheet/application"
in postcss.config.js: require('tailwindcss')('./app/javascript/stylesheet/tailwind.config.js'),
change folder name stylesheets into stylesheet

Rails Tailwind Setup: Module build failed (from ./node_modules/postcss-loader/src/index.js):

1 Answers