自定义 daisyUI 组件

如何自定义 daisyUI

daisyUI 自有的设计系统有很多变量，通常你不需要定义任何变量。

但是，你仍然可以通过很多方式来实现你的自定义目标

• 例如，你想自定义下面这个按钮：

<button class="btn">Button</button>

1. 你可以使用 daisyUI 的工具类：

<button class="btn btn-primary">One</button>
<button class="btn btn-secondary">Two</button>
<button class="btn btn-accent btn-outline">Three</button>

2. 你可以使用 Tailwind 的工具类：

<button class="btn rounded-full">One</button>
<button class="btn rounded-none px-16">Two</button>

3. 你可以通过 Tailwind 的 @apply 指令来自定义你的组件。

.btn {
  @apply rounded-full;
}

4. 你也可以：

• 增加自定义主题
• 通过 只使用无样式的（骨架）版本的 daisyUI 来完全去掉 daisyUI 的设计元素。

New template: SaaS Landing page

Available on daisyUI store

More details