将 daisyUI 与 HTMX 结合使用

如何安装和使用 daisyUI 与 HTMX

本指南使用 daisyUI 作为 Node.js 依赖项。如果您不想使用 Node.js，请尝试daisyUI 的 CDN 版本.

使用以下命令在当前目录中初始化一个新的 Node 项目npm init -y如果它还不是 Node 项目。

安装 Tailwind CSS CLI 和 daisyUI

终端

npm install tailwindcss@latest @tailwindcss/cli@latest daisyui@latest

将 Tailwind CSS 和 daisyUI 添加到您的 CSS 文件中。
在以下位置指定您的 HTML 和其他标记文件source函数中。

app.css

@import "tailwindcss" source(none);
@source "./public/*.{html,js}";
@plugin "daisyui";

在您的 package.json 文件中添加一个脚本来构建 CSS。

package.json

{
  "scripts": {
    "build:css": "npx @tailwindcss/cli -i app.css -o public/output.css"
  },
}

运行脚本以构建 CSS 文件

终端

npm run build:css

此命令创建一个public/output.css包含已编译 CSS 的文件。您可以将此文件链接到您的 HTML 文件。

public/index.html

<link href="./output.css" rel="stylesheet">

现在您可以使用 daisyUI 类名了！

你喜欢 daisyUI 吗？发帖宣传一下吧！

支持 daisyUI 的开发：Open Collective

NEXUS
官方 daisyUI 仪表盘模板