为 Rails 安装 daisyUI
如何在 Rails 项目中安装 Tailwind CSS 和 daisyUI
1. 创建一个新的 Rails 项目
根据官方 Rails 指南.
创建一个新的 Rails 项目
终端
rails new my-app
cd my-app2. 为 Rails 安装 Tailwind CSS
安装Tailwind CSS 4 gem为 Rails
终端
./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install3. 添加 daisyUI
有 3 种方法可以将 daisyUI 添加到您的 Rails 项目中
如果您已经在使用 Node.js，则推荐使用此方法。
这作为一个 Tailwind CSS 插件工作，因此只有您需要的类名会被添加到您的 CSS 文件中。
初始化 package.json（如果您没有）并安装 daisyUI
终端
npm init -y
npm install daisyui@latest将 Tailwind CSS 和 daisyUI 放入您的 CSS 文件中（并移除旧样式）
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";如果您不使用 Node.js，则推荐使用此方法。
这作为一个 Tailwind CSS 插件工作，因此只有您需要的类名会被添加到您的 CSS 文件中。
运行此代码以下载最新版本的 daisyUI 作为单个 js 文件
终端
curl -sLo app/assets/tailwind/daisyui.js https://github.com/saadeghi/daisyui/releases/latest/download/daisyui.js将 Tailwind CSS 和 daisyUI 放入您的 CSS 文件中（并移除旧样式）
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";如果您想快速添加 daisyUI 而无需添加任何文件，则推荐使用此方法。
将 Tailwind CSS 和 daisyUI 放入您的 CSS 文件中（并移除旧样式）
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.cn/npm/daisyui@5";- 您可以选择您需要的部分
- 您可以分别导入小的 CSS 文件
- 您可以导入所有主题或者特定主题
4. 在 Rails 中创建一个主页
现在您可以使用 daisyUI 类名了！让我们创建一个简单的页面并尝试一个按钮
app/controllers/pages_controller.rb
class PagesController < ApplicationController
def home
end
endconfig/routes.rb
Rails.application.routes.draw do
root to: 'pages#home'
endapp/views/pages/home.html.erb
<button class="btn btn-primary">Hello daisyUI!</button>5. 启动 Rails
终端
./bin/dev