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.
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.
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?
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.
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.
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.
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.
Ok, here is my summary: I created 3 new apps to test out the behaviors and defaults:
rails new default_js_css with no arguments
rails new default_tailwind --css=tailwind
rails new default_tailwind_bun --css=tailwind --js=bun
Here are the main differences in their Gemfiles, (the numbers correspond to the list above):
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.
The second app automatically includes gem tailwindcss-railsandimportmap-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!
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:
Do Hotwire and Stimulus have to be bundled, included, imported in a separate way? Import maps aren’t in place anymore.
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.
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).
To install Daisy UI, the best approach is using npm with npm i -D daisyui and adding it to tailwind.config.js. Importmaps are mainly for client-side usage; for development, npm is more reliable and preferred.
