DEV Community

Mike Rispoli
Mike Rispoli

Posted on

Installing DaisyUI in Rails without Node.js

#ruby #rails #tailwindcss #daisyui

I've been very intrigued by the no build frontend style of Rails 8+ and have begun a number of applications with a goal of sticking to this style. One area of difficulty though is that I love tailwind and namely DaisyUI.

The standard install in a node project requires npm and some build scripting but I wanted to add this to my rails application without needing to introduce Node.js. The following is how I did that.

I liked coupling this with the hotwire-spark gem to get hot reloading which gives the feeling of the hot reloading node frameworks I was used to but without the node for rails projects.

Prerequisites

  • Rails 8+ with tailwindcss-rails gem installed
  • Tailwind CSS v4 configured
  • Asset pipeline (Propshaft or Sprockets)

Installation Steps

1. Create Plugin Directory 

mkdir -p app/assets/tailwind/plugins
Enter fullscreen mode Exit fullscreen mode

2. Download DaisyUI Standalone Module

DaisyUI provides a standalone ESM module that can be used without npm:

curl -o app/assets/tailwind/plugins/daisyui.js https://cdn.jsdelivr.net/npm/daisyui@5/+esm
Enter fullscreen mode Exit fullscreen mode

This downloads the complete DaisyUI library (~242KB) as a single JavaScript file.

Note: The file is bundled with your application - no external CDN calls at runtime.

3. Configure Tailwind to Use DaisyUI Plugin

Edit app/assets/tailwind/application.css:

@import "tailwindcss";
@plugin "./plugins/daisyui.js";
Enter fullscreen mode Exit fullscreen mode

Important: The path is relative to the CSS file location.

4. Build Tailwind CSS 

bin/rails tailwindcss:build
Enter fullscreen mode Exit fullscreen mode

You should see output confirming DaisyUI loaded:

/*! 🌼 daisyUI 5.5.0 */
≈ tailwindcss v4.1.16
Done in 112ms
Enter fullscreen mode Exit fullscreen mode

Note: You may see a warning about @property --radialprogress. This is harmless - it's a newer CSS feature that DaisyUI uses for circular progress components.

Using DaisyUI Components

Once installed, all DaisyUI component classes are available:

Example: Alert Component 

<div class="alert alert-success">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <span>Your purchase has been confirmed!</span>
</div>
Enter fullscreen mode Exit fullscreen mode

Example: Card Component 

<div class="card bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p>Card content goes here</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Action</button>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Example: Form Components 

<div class="form-control">
  <%= f.label :email, class: "label" %>
  <%= f.email_field :email, class: "input input-bordered w-full" %>
</div>

<button class="btn btn-primary">Submit</button>
Enter fullscreen mode Exit fullscreen mode

Available DaisyUI Components

DaisyUI provides 50+ components:

Actions: Button, Dropdown, Modal, Swap
Data Display: Alert, Badge, Card, Table, Avatar
Data Input: Input, Textarea, Checkbox, Radio, Select, Toggle, Range
Layout: Divider, Drawer, Footer, Hero, Navbar
Navigation: Breadcrumbs, Menu, Pagination, Tabs
Feedback: Loading, Progress, Toast

Full list: https://daisyui.com/components/

Theming

DaisyUI includes multiple themes. Configure in app/assets/tailwind/application.css:

@import "tailwindcss";
@plugin "./plugins/daisyui.js";

/* Custom DaisyUI configuration */
@layer base {
  :root {
    --color-primary: oklch(45% .24 277.023); /* Custom purple */
  }
}
Enter fullscreen mode Exit fullscreen mode

Or use built-in themes by adding to HTML:

<html data-theme="dark">
  <!-- Your app -->
</html>
Enter fullscreen mode Exit fullscreen mode

Available themes: light, dark, cupcake, bumblebee, emerald, corporate, synthwave, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset

Automatic Rebuilding in Development

The tailwindcss-rails gem automatically watches for changes in development.

Your Procfile.dev should include:

web: bin/rails server
css: bin/rails tailwindcss:watch
Enter fullscreen mode Exit fullscreen mode

When running bin/dev, Tailwind automatically rebuilds when you:

  • Add new DaisyUI classes to views
  • Modify Tailwind configuration
  • Change CSS files

Production Deployment

Precompile Assets 

RAILS_ENV=production bin/rails assets:precompile
Enter fullscreen mode Exit fullscreen mode

This compiles Tailwind CSS with DaisyUI into app/assets/builds/tailwind.css.

Docker Deployment

Include the DaisyUI plugin file in your image:

# Dockerfile
COPY app/assets/tailwind ./app/assets/tailwind

# Precompile assets
RUN bin/rails tailwindcss:build
Enter fullscreen mode Exit fullscreen mode

The compiled CSS is self-contained - no runtime dependencies on DaisyUI or Tailwind.

Upgrading DaisyUI

To upgrade to a newer version:

# Download latest version
curl -o app/assets/tailwind/plugins/daisyui.js https://cdn.jsdelivr.net/npm/daisyui@latest/+esm

# Rebuild
bin/rails tailwindcss:build
Enter fullscreen mode Exit fullscreen mode

Or pin to a specific version:

curl -o app/assets/tailwind/plugins/daisyui.js https://cdn.jsdelivr.net/npm/daisyui@5.5.0/+esm
Enter fullscreen mode Exit fullscreen mode

Troubleshooting

Issue: "Unknown at rule: @plugin"

Solution: Ensure you're using Tailwind CSS v4+. The @plugin directive is new in v4.

Issue: DaisyUI classes not working

Solutions:

  1. Rebuild Tailwind: bin/rails tailwindcss:build
  2. Check the plugin path is correct in application.css
  3. Verify daisyui.js exists in app/assets/tailwind/plugins/

Issue: Styles not updating

Solution: Restart bin/dev to reload the Tailwind watcher.

Issue: Large file size

DaisyUI is ~242KB uncompressed. Tailwind CSS only includes classes you actually use in production, so the final CSS will be much smaller.

Comparison: NPM vs Standalone Method

Feature NPM Method Standalone Method
Node.js Required ✅ Yes ❌ No
npm/package.json ✅ Yes ❌ No
Build Process Complex Simple
Offline Deployment Requires node_modules ✅ Fully self-contained
Update Process npm update curl new version
File Size ~242KB in node_modules ~242KB in assets
Production Output Same Same

Both methods produce identical CSS output. Choose standalone for simplicity and self-contained deployments.

Additional Resources

Top comments (0)