Error: Cannot find module 'tailwindcss/defaultTheme' when deploying to Heroku

Question

I'm trying to deploy my Rails 7 app to Heroku but it fails on Running: rake assets:precompile with error: Error: Cannot find module 'tailwindcss/defaultTheme' when deploying to Heroku

I tried running RAILS_ENV=production bundle exec rake assets:precompile but it didn't help.

I am using gem "tailwindcss-rails", "~> 2.0" to add TailwindCSS to my Rails app.

It works locally when I run it with bin/dev(or rails s after running bin/dev).

Am I missing some crucial step here?

Here is my tailwind.config.js for reference.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*',
    './node_modules/flowbite/**/*.js'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        primary: "#000000",
        action: "#000000",
        "action-hover": "#000000"
      }
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
    require('flowbite/plugin')
  ]
}

Answer 1

So I found out that Heroku didn't run npm install because it recognized it only as a Ruby app so it had only heroku/ruby buildpack.

I had to add herok/nodejs buildpack as well so it runs npm install. Note: Also that heroku/nodejs buildpack has to be on the 1st place on heroku buildpacks(command)

I added it with heroku buildpacks:add --index 1 heroku/nodejs. But make sure it doesn't override Ruby buildpack so if it does just add it back.

So in the end heroku buildpacks command has to look like this:

1. heroku/nodejs
2. heroku/ruby