🎉 daisyUI 5.0 upgrade guide

Install daisyUI for Rails

How to install Tailwind CSS and daisyUI in a Rails project

1. Create a new Rails project

Install Ruby on Rails according to the official Rails guide.

Create a new Rails project

Terminal
rails new my-app
cd my-app

2. Install Tailwind CSS for Rails

Install Tailwind CSS 4 gem for Rails

Terminal
./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install

3. Add daisyUI

There are 3 ways to add daisyUI to your Rails project

This method is recommended if are already using Node.js.
This works as a Tailwind CSS plugin so only the class names you need will be added to your CSS file.

Initialize a package.json (if you don’t have one) and install daisyUI

Terminal
npm init -y
npm install daisyui@latest

Put Tailwind CSS and daisyUI in your CSS file (and remove old styles)

app/assets/tailwind/application.css
@import "tailwindcss" source(none);
@source "../../../public/*.html";
@source "../../../app/helpers/**/*.rb";
@source "../../../app/javascript/**/*.js";
@source "../../../app/views/**/*";

@plugin "daisyui";

This method is recommended if you are not using Node.js.
This works as a Tailwind CSS plugin so only the class names you need will be added to your CSS file.

Run this code to download latest version of daisyUI as a single js file

Terminal
curl -sLo app/assets/tailwind/daisyui.js https://esm.run/daisyui@5/index.js

Put Tailwind CSS and daisyUI in your CSS file (and remove old styles)

app/assets/tailwind/application.css
@import "tailwindcss" source(none);
@source "../../../public/*.html";
@source "../../../app/helpers/**/*.rb";
@source "../../../app/javascript/**/*.js";
@source "../../../app/views/**/*";

@plugin "./daisyui.js";

This method is recommended if you want to quickly add daisyUI without adding any file.

Put Tailwind CSS and daisyUI in your CSS file (and remove old styles)

app/assets/tailwind/application.css
@import "tailwindcss" source(none);
@source "../../../public/*.html";
@source "../../../app/helpers/**/*.rb";
@source "../../../app/javascript/**/*.js";
@source "../../../app/views/**/*";

@import "https://cdn.jsdelivr.net/npm/daisyui@5";

4. Create a homepage in Rails

Now you can use daisyUI class names! Let’s create a simple page and try a button

app/controllers/pages_controller.rb
class PagesController < ApplicationController
  def home
  end
end
config/routes.rb
Rails.application.routes.draw do
  root to: 'pages#home'
end
app/views/pages/home.html.erb
<button class="btn btn-primary">Hello daisyUI!</button>

5. Start Rails

Terminal
./bin/dev
Do you have a question? Ask on GitHub or Discord server
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
daisyUI store

NEXUS
Official daisyUI Dashboard Template

Available on daisyUI store

More details
Please upgrade your browser