Rails 6 and Tailwind CSS does not deploy to Heroku

Question

I have a Rails 6 app that was successfully deployed to Heroku and worked on localhost:3000.

I added tailwindcss via yarn and webpack. It runs perfectly fine on localhost, but does not run on heroku. When I run heroku logs I get the following error

I've read all the Heroku Rails 6 Webpacker issues, and tried all the suggestions. Nothing worked.

1. I have commented out <%= stylesheet_pack_tag %> ... didn't help
2. I have toggled extract_css: true in webpacker.yml file .... didn't help
3. I have run
   • heroku buildpacks:clear
   • heroku buildpacks:set heroku/nodejs
   • heroku buildpacks:add heroku/ruby ... didn't help

Does anyone have any idea what is going on?

My github repo is https://github.com/HundredBillion/enneagram

Answer 1

Stumbled across this post while stuck on a similar problem, hopefully this info will help someone in the future.

I solved my issue within the package.json file by moving the "tailwindcss" reference from the devDependencies to the dependencies block.

{
  "name": "app_name",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "jquery": "^3.5.1",
    "tailwindcss": "^1.2.0",  // <--- Now here.
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
                                    //<--- Was here.
    "webpack-dev-server": "^3.10.3"
  }
}

Answer 2

I had the same problem with you but I tried this one and it worked for me.

Inside of config/webpacker.yml, you must set extract_css: true default is false.