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

rails new my-app
cd my-app

2. Install Tailwind CSS for Rails

Install Tailwind CSS 4 gem for Rails

./bin/bundle add tailwindcss-rails --version "4.0.0"
./bin/rails tailwindcss:install

3. Add daisyUI

Option A. Install daisyUI as a Node dependency

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

npm init -y
npm install daisyui@beta

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

@import "tailwindcss";
@plugin "daisyui";

Option B. Use daisyUI from CDN

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

@import "tailwindcss";
@import "https://cdn.jsdelivr.net/npm/daisyui@beta/daisyui.css";

• You can choose the parts you need
• You can import small CSS files separately
• You can import all themes or specific themes

4. Create a homepage in Rails

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

class PagesController < ApplicationController
  def home
  end
end

Rails.application.routes.draw do
  root to: 'pages#home'
end

<button class="btn btn-primary">Hello daisyUI!</button>

5. Start Rails

./bin/dev

Official daisyUI
Figma Library

Available on daisyUI store

More details