Is it possible to use flyonui with importmap-rails?

rubyonrails-talk
1

Hey!

I already read Importmap or jsbundling? I use both, How does importmaps-rails replace yarn correctly in rails 8? and Download all the files associated with a package from a CDN by Caleb-T-Owens · Pull Request #235 · rails/importmap-rails · GitHub.

I was able to make it work by adding nodejs to my project with asdf and installing it as stated on Quick Start - FlyonUI

Installed it with:

npm install flyonui

Changed my tailwind.config.js to include the following:

module.exports = { 
  content: ["./node_modules/flyonui/dist/js/*.js"], // Require only if you want to use FlyonUI JS component (yes, I want!)

  plugins: [
    require("flyonui"),
    require("flyonui/plugin") // Require only if you want to use FlyonUI JS component (yes, I want!)
  ]
}

I also need to include the file node_modules/flyonui/flyonui.js in my HTML. For now, I just copied it to the public folder and referenced it with a script tag: <script src="flyonui.js"></script>.

It feels very hackish to me. I would love to hear suggestions on how I can improve this.

I also don’t understand how the content and plugins’ contents are processed in the background by tailwindcss. I think the content is just to determine what classes it must include in the final CSS bundle, and the require statements in plugins have some conventions to load the files from the node_modules.

Best regards!

2

Hi,

Just to clarify, I don’t have any experience with Rails, but I’m quite familiar with FlyonUI Tailwind CSS Components library.

Regarding your question about TailwindCSS, are you using version 3 or version 4? This setup is designed for TailwindCSS V3, but FlyonUI is working on adding support for V4.

Now, what you did with flyonui.js seems fine, as sometimes it’s required. They have also done this in Svelte, Django, Flask, etc. Alternatively, if you’re using a bundler, you can simply import FlyonUI like this:

import flyonui from 'flyonui/flyonui';

The following is also required for Tailwind to generate the CSS from the JS, as Tailwind CSS v3 looks for classes in these locations.

content: ["./node_modules/flyonui/dist/js/*.js"];

This is necessary for generating the semantic classes, and:

require("flyonui");

This will enable custom variants for JS components, such as dropdown-open:{tailwind utility class}.

require("flyonui/plugin");

Hope this helps!

1 Like