How can i install Daisy UI?

I want to be able to use Daisy UI, but i am reading different ways to accomplish this – making me confused on how to actually install node packages.

  1. One way is setting up the CDN, which is not the best way – its not even an option due to the file size for production.
  2. npm i -D daisyui and then adding to tailwind.config.js:
...
  plugins: [require("daisyui")],
}

Note: I read in a post which i can’t find now that said that i could install packages without having node installed – is that true? I don’t know as i use node for other projects but it would be good to know. 3. Using importmaps? Which i don’t really know how to use it. Would this be the same as using the CDN, but adding it to the importmaps file? 4. Final question: How can i tell when is better to just install packages using npm or to include them in the importmaps file?

Have you identified the version of Daisy UI you want to install, and does it have any specific requirements?

For option #2, I was trying this recently as well and what worked for me was to install bun (node should work too) and convert from the tailwindcss-rails gem to the cssbundling-rails gem.

The equivalent of what you get with running:

  • rails new myapp --javascript=bun --css=tailwind

then you can add daisyui

  • bun add daisyui / npm install daisyui

Why? (hope I have this right, happy to be corrected)

  • daisy installs with npm, so we need bun or node
  • tailwindcss-rails wraps the standalone tailwind cli, which does not appear to support plugins like daisy that need to be installed with npm.

source: How to import Tailwind plugin in Rails 7 - Stack Overflow

2 Likes

So are you saying that the tailwind.config.js file wouldn’t have an entry for daisyui in it?

plugins: [
// I currently have this but it throws an error; otherwise, Tailwind works fine.
    require("daisyui"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/typography"),
    require("@tailwindcss/container-queries"),
  ],

In that case, is another build processes adding the DaisyUI CSS to the asset pipeline?

I installed Tailwind using these instructions but now I’m wanting to use DaisyUI as well and I’m new to nuances between how to build/import JS. I don’t think I did anything specific when creating this app (Rails 7.0.x), so I’m trying to wrap my head around what the default approach is, if it will suffice, or if I need to take a different asset bundlng approach.

So are you saying that the tailwind.config.js file wouldn’t have an entry for daisyui in it?

No, It still should be added to tailwind.config.js

a more accurate/complete set of steps:

  1. Create the app or the equivalent of what you get with running:

rails new myapp --javascript=bun --css=tailwind

  1. Follow the DaisyUI instructions

That includes the bun add daisyui/npm install daisyui and the adding to the tailwind.config.js

  1. Add the daisy component to a view to test
<h1>Welcome#index</h1>
<p>Find me in app/views/welcome/index.html.erb</p>

<button class="btn">daisyUI Button</button>
  1. run bin/dev

Should see the button component

Screenshot 2024-01-25 at 6.06.41 PM

Hmm, I think what I need to sort it out is how I’ll be handling my JS. I don’t think I passed any options specifically for the --js flag such as :

# Choose JavaScript approach [options: importmap (default), bun, webpack, esbuild, rollup]

I assume that I defaulted to importmap but I installed Tailwind by adding the gem instead of using the --css=tailwind flag at the start.

I see you’re using the --js=bun flag; I was actually using yarn.

I haven’t had to configure JS stuff in quite some time. About 5 years ago I was just using npm and gulp, now we have several options!

I’m going to start a fresh 7.1 app with 0 arguments to rails new just to see what happens. I’ll tinker around with this approach, doing the same but with the flags you used; I truly want to understand what gets generated with these flags, and how this relates to:

  • sprockets
  • propshaft

And the rest of the asset pipeline. Once I get it sorted, I’ll go back to my project and make my necessary tweaks. Maybe I should upgrade it from 7.0 to 7.1 as well, but once I sort out the DaisyUI stuff.

Thanks for your help @ryanwi

building from a fresh app was helpful for me too to try the options.

think what I need to sort it out is how I’ll be handling my JS. I don’t think I passed any options specifically for the --js flag such as

This is the key. importmap won’t work if you want to add daisyUI. What also finally helped me understand better was this SO answer

To use any other tailwind plugins you must run a full node.js version of tailwind. The Rails 7 way is to use cssbundling-rails

Once we want to use daisyUI, we cannot use -js importmap or the tailwindcss-rails gem. To use other plugins like daisyUI, a js option like bun or node+yarn or node+npm is required.

1 Like

Ryan, (and anyone else who may find this useful):

Ok, here is my summary: I created 3 new apps to test out the behaviors and defaults:

  1. rails new default_js_css with no arguments
  2. rails new default_tailwind --css=tailwind
  3. rails new default_tailwind_bun --css=tailwind --js=bun

Here are the main differences in their Gemfiles, (the numbers correspond to the list above):

  1. There aren’t any gems regarding CSS. Regarding JS, there is this, gem importmap-rails, which leans on a config/importmap.rb that looks like this:

    # Pin npm packages by running ./bin/importmap
      3 pin "application"
      4 pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
      5 pin "@hotwired/stimulus", to: "stimulus.min.js"
      6 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
      7 pin_all_from "app/javascript/controllers", under: "controllers"
    

    You can then import these in your app/javascript/files.

  2. The second app automatically includes gem tailwindcss-rails and importmap-rails, which as you mentioned, is fine for Tailwind but does not work for adding anything that requires something like yarn, bun, npm, etc. In fact, postcss gets added when one installs Tailwind and the console shows:

        Error: Cannot find module 'postcss'
    

    I do appreciate the magic of the following step because obviously someone, or several people, through this through!

  3. The third has gems like these:

    • gem jsbundling-rails and gem cssbundling rails.

    NOTE, this is no longer using the gem tailwindcss-rails. In this case, as long as there are no issues with the JS runtime, installing DaisyUI and adding it as a plugin to the tailwind.config.js works just fine!

For the 2nd and 3rd approaches, I’m sure there might be other interesting implications such as:

  1. Do Hotwire and Stimulus have to be bundled, included, imported in a separate way? Import maps aren’t in place anymore.
  2. These approaches automatically generate a Procfile.dev, leading to access of the bin/dev command from the terminal, which is nice!

I assume what my existing app needs is the removal of the tailwindcss-rails gem and the addition of the js/cssbunding-rails gems, as well as proper config with yarn (which is what I am using in that app). I think you mentioned this in a more concise way but I felt the need to explore it in more depth and write some notes that might serve as a blog post, or at least a thoughtful reply to this forum.

Thank you both!

2 Likes

Nice digging, thanks for sharing.

  1. Do Hotwire and Stimulus have to be bundled, included, imported in a separate way? Import maps aren’t in place anymore.

jsbundling-rails/bun should take care of this.

The application layout should be the more traditional <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %> and not the importmap version <%= javascript_importmap_tags %>

Good discussion. Following the discussion, I succeeded with the following

rails new tailwind_daisyui_esbuild -j esbuild -a propshaft --css tailwind --database postgresql --skip-action-mailer --skip-action-mailbox --skip-action-cable

➜ yarn add daisyui # gambled that this was all that was needed. Yarn can be usually used in place of npm for macOS (if I understand this correctly) and the commands are usually simpler.

ruby “3.3.0” gem “rails”, “~> 7.1.3”

postgres not required but I usually use it, so left it in. And I had to create the database, but leaving out postgres only makes it easier.

propshaft probably isn’t needed either.

I’m pretty sure that all the Hotwire pieces are there. Well looking at app/javascript/application.js I only see turbo-rails. So maybe another step is needed for Stimulus.

I got an error on bin/dev and just ran yarn. (I’ve found running bundle or yarn again in early stages of an app can be helpful).