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

Craft

where you able to fix it? – Northumbrian

no - ended up creating a bootstrap rails project and just pushed that to Heroku. – Craft

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"
  }
}

Staphylococcus

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.

Richardson

This was the issue for me - this setting needed to be true for all environments, and I also needed <%= stylesheet_pack_tag 'application' %> to be included in app/views/layouts/application.html.erb – Dekker

Same here @BobWhitelock. Did you also remove the default <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> and add media: 'all', 'data-turbolinks-track': 'reload' to the stylesheet_pack_tag? – Marchant

Answer 3

I have a few suggestions for you, let me know which one (if any) work for you.

In webpacker.yml for all instances of the below options

check_yarn_integrity: false
compile: true

Try

./bin/setup
rails webpacker:clobber
rails webpacker:compile

If none of the above work then perhaps one of these links will help:

• https://github.com/tailwindcss/discuss/issues/4#issuecomment-341918136
• https://github.com/rails/tailwindcss-rails

Cambell

thanks for this info. it didn't help but I'm going to keep trying other options. – Craft

Is this for prod? – Northumbrian

@StevenAguilar - yes it's for production – Craft

Answer 4

I had a different error where after updating/fiddling with tailwind my create-react-app wouldn't deploy (highly likely something it did).

my buildpack was node.js. changed per https://github.com/mars/create-react-app-buildpack#user-content-troubleshooting

Confirm that your app is using this buildpack:

heroku buildpacks If it's not using create-react-app-buildpack, then set it:

heroku buildpacks:set mars/create-react-app …and deploy with the new buildpack:

git commit --allow-empty -m 'Switch to create-react-app-buildpack' git push heroku master

Mahmud