0

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.

acoustic_north
  • 815
  • 11
  • 31
  • have you solved this issue? i'm having the same problem. Mine was working until I added `require('flowbite/plugin')`, to tailwind.config.js – beydogan Jul 21 '23 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. – acoustic_north Aug 10 '23 at 17:35

1 Answers1

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

David
  • 149
  • 1
  • 4