1

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/[email protected]/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.

Improve this question
4
  • 2
    have you solved this issue? i'm having the same problem. Mine was working until I added require('flowbite/plugin'), to tailwind.config.js Commented Jul 21, 2023 at 13:59
  • 1
    I eventually got this to work, but I am not absolutely sure how I fixed it. As I recall, I had to add the specific architecture for my linux server (which is different than my M1 Mac). I ran this command: bundle lock --add-platform x86_64-linux. I MAY have also have had to install Tailwindcss on my server, but my recollection is that I did not. I hope this helps. I am not at a place where I can test another deployment from scratch. I should have been more careful to document this fix. I was just so happy that it finally worked. Commented Aug 10, 2023 at 17:35
  • I am having the same issue on render.com Each time i try to deploy my rails application the build fails when flowbite is added to my tailwind config file.But when i remove flowbite the application builds and deploys. Commented Jan 2, 2024 at 13:29
  • @beydogan also dealing with the unclear flowbite integration — anyone else find a non-node way to fix this? or is this a fundamental importmap + TW + flowbite incompatibility? Commented Jan 2, 2024 at 21:12

2 Answers 2

Reset to default
0

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Running npm install flowbite solved the problem for me too. Though this looks like a dirty fix. It should be enough to import flowbite via importmap.
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.