rails 6 heroku asset precompile not working in production

I have a rails 6, tailwind app and it works fine in development. But when I push it to heroku, the asset compilation seems not to work. The result is that there is no CSS in the production app.

I managed to replicate the same error on my local machine by doing: RAILS_ENV=production bundle exec rake assets:precompile

Then I also have no css shown on my local app. When I then do RAILS_ENV=development bundle exec rake assets:precompile

it works again.

here is my bin/webpack file:

ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"]  ||= "development"

require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
Pathname.new(__FILE__).realpath)

require "bundler/setup"

require "webpacker"
require "webpacker/webpack_runner"


APP_ROOT = File.expand_path("..", __dir__)
Dir.chdir(APP_ROOT) do
  Webpacker::WebpackRunner.run(ARGV)
end

Here is my application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css"

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= flash[:alert] %>
    <%= flash[:notice] %>
    <%= yield %>
    <%= render 'layouts/footer' %>
  </body>
</html>

Here is my postcss.config.js

let environment = {
  plugins: [
    require('tailwindcss')('./app/javascript/stylesheet/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

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

And my package.json

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.2.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "turbolinks": "^5.2.0",
    "webpack": "^4.0.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "autoprefixer": "^9",
    "postcss": "^7",
    "webpack-dev-server": "^3.11.2"
  },
  "workspaces": {
    "nohoist": [
      "**/tailwindcss",
      "**/@tailwindcss/**"
    ]
  }
}