为 PostCSS 安装 daisyUI

如何在 PostCSS 中安装 Tailwind CSS 和 daisyUI

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

安装 PostCSS、Tailwind CSS 和 daisyUI

终端

npm i postcss postcss-cli tailwindcss @tailwindcss/postcss daisyui@latest

创建一个 postcss.config.mjs 文件并将 Tailwind CSS 添加到其中

postcss.config.mjs

const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};
export default config;

将 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": "postcss 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 仪表盘模板