Error: Cannot find module 'tailwindcss/defaultTheme' issue with Rails 7.0.5 and Ruby 3.1.2 and Tailwindcss

Question

I am having a heck of a time getting tailwindcss and flowbite to deploy on my Rails 7.0.5 server. Please let me know if you have any suggestions on how to fix. It works just fine in development mode, but when I deploy using Capistrano I end of getting a bunch of errors beginning with the following one, all related to tailwindcss:

        bundler:install
          The Gemfile's dependencies are satisfied, skipping installation
    00:27 deploy:assets:precompile
          01 $HOME/.rbenv/bin/rbenv exec bundle exec rake assets:precompile
          01
          01 Rebuilding...
          01 Error: Cannot find module 'tailwindcss/defaultTheme'
          01 Require stack:
          01 - /var/www/ai_demo/releases/20230525205652/config/tailwind.config.js
          01     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
          01     at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
          01     at Function.resolve (node:internal/modules/cjs/helpers:108:19)
          01     at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:241025)
          01     at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:243309)
          01     at /var/www/ai_demo/releases/20230525205652/config/tailwind.config.js:1:97
          01     at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:245784)
          01     at /snapshot/tailwindcss/lib/lib/load-config.js:37:30
          01     at loadConfig (/snapshot/tailwindcss/lib/lib/load-config.js:39:6)
          01     at Object.loadConfig (/snapshot/tailwindcss/lib/cli/build/plugin.js:135:49) {
          01   code: 'MODULE_NOT_FOUND',
          01   requireStack: [
          01     '/var/www/ai_demo/releases/20230525205652/config/tailwind.config.js'
          01   ]
          01 }

Here is my tailwind.config.js

 

    const defaultTheme = require('tailwindcss/defaultTheme')
    
    module.exports = {
      content: [
        './public/*.html',
        './app/helpers/**/*.rb',
        './app/javascript/**/*.js',
        './app/views/**/*.{erb,haml,html,slim}',
        "./node_modules/flowbite/**/*.js",
      ],
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter var', ...defaultTheme.fontFamily.sans],
          },
        },
      },
      plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/typography'),
        require('flowbite/plugin'),
      ]
    }

Here is my importmap.rb file:

    pin "application", preload: true
    pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
    pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
    pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
    pin_all_from "app/javascript/controllers", under: "controllers"
    pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.7/lib/index.js"
    pin "flowbite", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.turbo.min.js"

Here is my app/javascript/application.js file:

<pre>
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import 'flowbite';

</pre>

UPDATE: Yes, I am using the "tailwindcss-rails" gem. It was preinstalled when I specified the --css tailwind option when creating the new rails project.

Answer 1

face the same issue, fix by add task to capistrano task in config/deploy.rb add flowing code

namespace :yarn do
  task :install do
    on release_roles(fetch(:assets_roles)) do
      within release_path do
        with rails_env: fetch(:rails_env) do
          execute :rake, "yarn:install"
        end
      end
    end
  end
end
after 'bundler:install', 'yarn:install'

then cap production deploy successful

Answer 2

Have you run npm install flowbite or yarn add flowbite as per the documentation? It seems like you still need it even though it is included through the importmap pin and application.js import statement. I have omitted it first thinking it was either or. Taken from the docs