# Installing DaisyUI in Rails without Node.js By: Michael Rispoli Published: 2025-11-19 I wanted to add DaisyUI to my new Rails application using tailwind but didn't want to have to introduce Node.js. The following is how you can do just that and limit those dependencies. 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 ```bash mkdir -p app/assets/tailwind/plugins ``` ### 2. Download DaisyUI Standalone Module DaisyUI provides a standalone ESM module that can be used without npm: ```bash curl -o app/assets/tailwind/plugins/daisyui.js https://cdn.jsdelivr.net/npm/daisyui@5/+esm ``` 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`: ```css @import "tailwindcss"; @plugin "./plugins/daisyui.js"; ``` **Important**: The path is relative to the CSS file location. ### 4. Build Tailwind CSS ```bash bin/rails tailwindcss:build ``` You should see output confirming DaisyUI loaded: ``` /*! 🌼 daisyUI 5.5.0 */ ≈ tailwindcss v4.1.16 Done in 112ms ``` **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 ```erb
Your purchase has been confirmed!
``` ### Example: Card Component ```erb

Card Title

Card content goes here

``` ### Example: Form Components ```erb
<%= f.label :email, class: "label" %> <%= f.email_field :email, class: "input input-bordered w-full" %>
``` --- ## 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`: ```css @import "tailwindcss"; @plugin "./plugins/daisyui.js"; /* Custom DaisyUI configuration */ @layer base { :root { --color-primary: oklch(45% .24 277.023); /* Custom purple */ } } ``` Or use built-in themes by adding to HTML: ```erb ``` **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 ``` 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 ```bash RAILS_ENV=production bin/rails assets:precompile ``` This compiles Tailwind CSS with DaisyUI into `app/assets/builds/tailwind.css`. ### Docker Deployment Include the DaisyUI plugin file in your image: ```dockerfile # Dockerfile COPY app/assets/tailwind ./app/assets/tailwind # Precompile assets RUN bin/rails tailwindcss:build ``` The compiled CSS is self-contained - no runtime dependencies on DaisyUI or Tailwind. --- ## Upgrading DaisyUI To upgrade to a newer version: ```bash # Download latest version curl -o app/assets/tailwind/plugins/daisyui.js https://cdn.jsdelivr.net/npm/daisyui@latest/+esm # Rebuild bin/rails tailwindcss:build ``` Or pin to a specific version: ```bash curl -o app/assets/tailwind/plugins/daisyui.js https://cdn.jsdelivr.net/npm/daisyui@5.5.0/+esm ``` --- ## 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 - **DaisyUI Documentation**: https://daisyui.com/ - **Tailwind CSS v4**: https://tailwindcss.com/ - **tailwindcss-rails gem**: https://github.com/rails/tailwindcss-rails Canonical URL: https://www.causeofakind.com/blog/installing-daisyui-in-rails-without-node-js