Rails 8 + Importmaps - missing backdrop

[alec-c4]

Describe the bug There are no backdrop in rails8 app using importmaps

To Reproduce

• Git clone https://github.com/alec-c4/flowbite_issue
• cd flowbite_issue
• run bundle install
• run bin/dev
• open http://localhost:3000
• see no backdrop on modal open

[alec-c4]

I've created an app with esbuild and backdrop works fine

[alec-c4]

@jbwl May I ask you to explain your point of view?

[bitshaker]

@alec-c4 you didn't add the css into your project, that's likely why it's not picking up the backdrop

[alec-c4]

@bitshaker what do you mean? Check those lines https://github.com/alec-c4/flowbite_issue/blob/fd8c7059d4b767fefd804bfe02881c3015d4b14f/app/views/layouts/application.html.erb#L20C1-L22C66

[alec-c4]

@bitshaker and https://github.com/alec-c4/flowbite_issue/blob/fd8c7059d4b767fefd804bfe02881c3015d4b14f/app/javascript/application.js#L5

As it described in docs - I need only to pin flowbite to importmap.rb and to add it to application.js

[bitshaker]

The Flowbite specific css file is not in your repo. It needs to be there. Here’s a simple way to do it.

https://youtu.be/zDhM5HQ10aA

tl;dw

Download the latest CDN versions of the flowbite.min.css and flowbite.turbo.min.js files.

Put the flowbite.turbo.min.js file in vendor/javascript Put the flowbite.min.css in vendor/assets/stylesheets

Add flowbite to the importmap.rb file like:

pin "flowbite", to: "flowbite.turbo.min.js"

Add flowbite to the application.js file like:

import "flowbite"

In the tailwind.config.js file, add a darkMode toggle class preference (default is media if you want to leave it alone) like:

module.exports = {
  darkMode: "class", //add this line
  content: [ 
  //all the default stuff here
]
}

Add the stylesheet to application.html.erb like:

<%= stylesheet_link_tag "flowbite", "data-turbo-track": "reload" %>

Bonus: download the markdown files from the flowbite repo where it describes each component. That way, you have context for AI coding help or just your own documentation in your IDE

[alec-c4]

@bitshaker I've checked this video and, you know, it goes against almost all rails principles. But, anyway, let's check docs, I've mentioned earlier. If you clone my repo and check it - you'll see that everything done following this guide. Also, you can add any code sample from flowbite docs and everything work fine, except backdrop.

But, ok, forget my repo, let's check rails guides - https://guides.rubyonrails.org/asset_pipeline.html Everytime you pin any package - it is downloaded to vendor/javascript folder for some reason (offline access, prevent from yanking from package hosting, etc.). So, we need to create a separate package for flowbite.turbo. Also, I've found following issue https://github.com/rails/importmap-rails/issues/80 - with importmaps it is impossible to pin CSS. That's why the author of your video have downloaded flowbite.turbo.js and css to vendor folder. As I said - it isn't a rails way, but a workaround.

I have an idea - it is possible to publish ruby gem, which will make all required js/css available without importmaps. @zoltanszogyenyi what do you think? Dow you need my help with rubygem?

[alec-c4]

Also, I've found the following gem https://github.com/iwdt/flowbite-rails but it looks abandoned

[alec-c4]

I've checked again this video and there is another problem - author have imported tailwind 2 times - from app/assets/stylesheets/application.tailwind.css and from vendor/assets/stylesheets/flowbite.css

I strongly recommend avoiding following such scheme. There are 2 working schemes:

1. rubygem with js and css
2. create separate flowbite.turbo package + add ability to download and put to app/assets/stylesheets or vendor/assets/stylesheets clean css file without tailwind and other stuff, only flowbite code.

I think that rubygem way is more accurate, because developers, who use flowbite, will receive updated assets without necessarily to update local files

[bitshaker]

Agreed. If you know how to put a gem together, I’ll happily use it and help if I can.

[alec-c4]

@bitshaker I'll try to do something this weekend

[jaspervanbrian]

I can confirm that this problem exists. Also datepicker looks wonky without the minified css.

[alec-c4]

Hey! I spent some time and I think I know what's wrong with backdrop. The problem occurs is because of tailwind do purgecss for unused classes and all those classes are listed in flowbite/plugin.js. There is a problem with flowbite plugin, it cannot be loaded with importmap. I've created a gem (but didn't publish yet because of plugin.js issue) which pins flowbite.turbo.js avoiding necessarily to pin flowbite to importmap.rb, but I haven't fixed an issue when I do put plugin.js locally and link it in tailwind.config.js :( But if you're strong in JavaScript I'll be appreciated for your help.

[thomaswitt]

I forked the Gem, updated it and I am using it, it works so far in my Rails 8 Application.

Does somebody have an idea how to integrate flowbite-typography via Importmaps?

[paicha]

For friends struggling with how to introduce Flowbite in Rails 8, you might want to try this approach and accept the trade-offs: https://discuss.rubyonrails.org/t/importmap-or-jsbundling-i-use-both/87647

[alec-c4]

For friends struggling with how to introduce Flowbite in Rails 8, you might want to try this approach and accept the trade-offs: https://discuss.rubyonrails.org/t/importmap-or-jsbundling-i-use-both/87647

Hi. Yep - there are some limitations because of tailwind. I wrote an article how to migrate from importmaps to esbuild, hope you'll find it useful - https://alec-c4.com/posts/2024-12-15-migrate-from-importmap/

[alec-c4]

Hey, guys! I believe I've found a good enough solution. To avoid tailwind to purge backdrop classes you just need to add in your application.css following line

@source inline("bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40");

it works fine with modals and drawers, but i'm not sure about other components, so please check it.

@zoltanszogyenyi may I ask you to add following instruction to documentation?