A Rails 7 todo list with daisyUI and Bun

23 May 2024 - 2 minute read

I’m trying to build my portfolio, so I wanted to start easy by following a tried and true tutorial like this really good one by David Colby, and in trying to make my own life easier installing daisyUI for its brilliant utility classes for Tailwind, bumped into issues trying to make it work on Rails with Importmaps.

As far as I can tell, that is currently not possible. I will be updating this post if that ever changes.

It’s also come to my attention that installing Tailwind with the rails new flags makes it more difficult to implement daisyUI in a way that plays well with Turbo for some reason.

So, with that in mind, this is what I did to make everyone play nice with each other:

• If you don’t have it in your system, first install Bun.
• Then, when creating a new Rails app we only set up Bun, and any other flags you may require, except for anything CSS related:

rails new todo_list -j bun

• After creating the new Rails app there’s some further setup required. We’re adding cssbundling-rails because apparently this way allows more flexibility with third-party plugins for Tailwind.

bundle add cssbundling-rails
bin/rails css:install:tailwind
bun add -D @tailwindcss/typography

• You may have noticed the addition of the @tailwindcss/typography package. This is because when installing Tailwind with cssbundling, you might have to manually add with Bun all the basic plugins like @tailwindcss/forms and @tailwindcss/container-queries.
• At long last, you may be able to install daisyUI:

bun add -D daisyui@latest

• You still need to add the plugins to your tailwind.config.js file, like so:

module.exports = {
  content: [
    /* ... */
  ],
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
    require("@tailwindcss/container-queries"),
    require("daisyui")
  ],   
}

The daisyUI docs explicitly ask that the line require("daisyui") be added after require("@tailwindcss/typography"), so please keep that in mind.

If you need to add Bun to an existing project I refer you to this video tutorial.

If you need to add daisyUI to an existing project, the recommended action is to remove the tailwindcss-rails gem and install cssbundling-rails, and follow up from that point, keeping in mind that you should probably backup your tailwind.config.js file beforehand.

And that’s it! You can look at what I did here. The original tutorial is way better at explaining the basics of Turbo than I possibly could at this point.

Versions of tools used:

• Ruby: 3.3.1
• Rails: 7.1.3.3
• Bun: 1.1.8
• Turbo-Rails: 8.0.4
• TailwindCSS: 3.4.3
• daisyUI: 4.11.1