将 daisyUI 与 Tailwind CSS CLI 一起使用

如何使用 Tailwind CSS CLI 安装和使用 daisyUI

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

安装 Tailwind CSS CLI 和 daisyUI

终端

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

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

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 仪表盘模板