为 Angular 安装 daisyUI

如何在 Angular 项目中安装 Tailwind CSS 和 daisyUI

1. 创建一个新的 Angular 项目

全局安装 Angular CLI

终端
npm install -g @angular/cli@latest

创建一个名为my-project的新 Angular 项目并导航到它

终端
ng new my-project --style css
cd my-project

2. 安装 Tailwind CSS、PostCSS 和 daisyUI

终端
npm install daisyui@latest tailwindcss@latest @tailwindcss/postcss@latest postcss@latest --force

将 PostCSS 的 Tailwind CSS 插件添加到新的.postcssrc.json根目录文件

.postcssrc.json
{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

将 Tailwind CSS 和 daisyUI 放入你的 CSS 文件中(并移除旧样式)

src/styles.css
@import "tailwindcss";
@plugin "daisyui";

运行 Angular 开发服务器

终端
ng serve

现在你可以使用 daisyUI 类名了!

daisyUI store

NEXUS
官方 daisyUI 仪表板模板

在 daisyUI 商店有售

更多详情