Unable to deploy TailwindCSS on a Rails 6 app to Heroku

Question

I'm currently trying to deploy my rails 6 application to Heroku. I tried the answer in a post about a similar issue but had no luck.. I'm not sure where the error is coming from since the styles work well on development but break when pushing to production. Not sure if it has to do with the fact that it is currently compiling css assets with sass?

 [14] ./node_modules/@rails/actiontext/app/javascript/actiontext/index.js + 1 modules 2.64 KiB {0} [built]
remote:             |    2 modules
remote:            + 7 hidden modules
remote:        
remote:        ERROR in ./app/javascript/stylesheets/application.scss
remote:        Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
remote:        ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
remote:        
remote:        @import "tailwindcss/base";
remote:        ^
remote:              File to import not found or unreadable: tailwindcss/base.
remote:              in /tmp/build_d98149372aae5001d8aada1182784254/app/javascript/stylesheets/application.scss (line 1, column 1)
remote:            at runLoaders (/tmp/build_d98149372aae5001d8aada1182784254/node_modules/webpack/lib/NormalModule.js:316:20)

Not sure why is File to import not found or unreadable: tailwindcss/base. not loading. From the documentation on Tailwind it shows to add it via @import

javascript/stylesheets/application.scss  
​
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Tailwind is also showing in the dependencies.

package.json

  "version": "0.1.0",
  "devDependencies": {
    "tailwindcss": "^1.2.0",
    "webpack-dev-server": "^3.7.1"
  }

views/layouts/application.html.erb

<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all',  'data-turbolinks-track': 'reload' %>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />

if no asset processor is defined it defaults to sass which is what I'm using to compile the css. I thought this could be a reason why is not working.

config/environments/production.rb

  # Compress CSS using a preprocessor.
  # config.assets.css_compressor = :sass
  config.assets.js_compressor = :uglifier

postcss.config.js

  module.exports = {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        require('postcss-import'),
        require('postcss-flexbugs-fixes'),
        require('postcss-preset-env')({
          autoprefixer: {
            flexbox: 'no-2009'
          },
          stage: 3
        })
      ]
    }

From reading the related Stack overflow post set extract_css: to true

webpacker.yml

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

What could the problem be?

Answer 1

 "devDependencies": {
    "tailwindcss": "^1.2.0",
    "webpack-dev-server": "^3.7.1"
  }

Tailwind is within dev dependencies so this won't work in production move the dependence outside of devDependencies so it can be used in production.