Can I use a component library with just tailwindcss-rails or do I need node?

rubyonrails-talk
1

I love that Rails 7 eliminates the node dependency. It’s a huge simplification! However, after getting my project up and running with just tailwindcss-rails I want to add a tailwind component library to save me time.

I looked at Daisy UI and Flowbite, two popular ones, but I can’t get either of them to work by following their directions. I might not be fully understanding how importmap and tailwind plugins work.

Is it correct that no tailwind plugins are supported by tailwindcss-rails besides the ~4 plugins made by tailwind itself? That seems to be the case. With Daisy UI, for example, I could only get this working by directly linking to the full minified CSS on a CDN within my application template, but that’s a 2 MB file. I won’t get any of the tree shaking that tailwind provides?

In the case of Flowbite, I think this requires the same full minified CSS, link but it appears I can at least install the javascript component using importmap? Notably, Daisy UI doesn’t require any javascript inclusion.

This was the best I could do to get both of these libraries working, as I’ve been trying them out. But I feel like I’m missing something. Is there a better way to incorporate a Tailwind UI library in an efficient manner without resorting to jsbundling-rails and going down the whole node path again?

2

Are you following Tailwind CSS Ruby on Rails - Flowbite with importmap.

Those instructions are confusing.

rails new tailwind_flowbite **--css tailwind** will take care of much of it.

npm should not be needed. The pin "flowbite", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.turbo.min.js" and application.js file changes should do the other important stuff.

Rails 7.1.3

3

The Rails Asset pipeline is confusing, even with importmaps (I’ve written about this quite a bit)

Here’s the basics:

  1. Follow the instructions for installing tailwindcss-rails
  2. Use npm, yarn, or whatever the JS-package-manager-of-the-week is to install DaisyUI
  3. The tailwind.config.js file in your Rails project has a plugins directive—add the DaisyUI path there (per what’s on the DaisyUI website)

What’s weird is you need npm (or whatever) to download DaisyUI for the tailwind CLI, but that’s it. You don’t need to endure the pain of jsbundling-rails to deploy.

1 Like