Tailwind failing not compiling in production mode

[JoshReedSchramm]

Hi all - hoping someone might have some thoughts.

We recently migrated from rails-webpacker to shakapacker v6. We also use tailwindcss which was previously working in our rails-webpacker setup. We're on Rails 6.1.

On the new configuration the tailwind-compile step processes correctly in development mode. Specifically directives like

div {
  p {
      @apply tw-text-xl tw-leading-8;
   }
}

currently turn into the css that applies the text-xl and leading-8 styles.

In production the outputted scss file doesnt process that directive at all. It still reads "@apply tw-text-xl".

We host on Heroku and I've been able to recreate the compilation behavior locally by setting a bunch of env vars to prod values and then running ./bin/webpacker - the resulting files have the "@apply" statements meaning they didnt get converted.

Has anyone been successful in this combination? There's a bunch of stuff online but most of it is dated and what I could find didn't work including setting extract_css and moving around the pathing a bunch. I thought maybe it's something with the sass-loader but I cant understand why it would differ by environment.

Thanks

[JoshReedSchramm]

answering my own post in case anyone runs into this in the future.

The issue was, i believe, a combination of two things.

1. We needed to move all the postcss related packages out of devDependencies and into normal dependencies.
2. We updated webpack.config.js to add the sass-loader. Our config now looks like this:

const { webpackConfig, merge } = require('shakapacker')
const sassLoaderConfig = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "sass-loader",
        ],
      },
    ],
  },
};

const options = {
  resolve: {
    extensions: ['.mjs', '.js', '.sass', ".scss", ".css", ".module.sass", ".module.scss", ".module.css", ".png", ".svg", ".gif", ".jpeg", ".jpg"]
  }
};

module.exports = merge(webpackConfig, sassLoaderConfig, options);

Not sure if that extensions thing is needed but its working now on heroku.