daisyUI

Tailwind CSS 是一个实用且高度可定制的 CSS 框架。它让开发者通过简单地添加类名来轻松创建任何样式，无需编写自定义 CSS。与其他 CSS 框架相比，Tailwindcss 更加注重可定制性，因此可以更好地满足特定项目的需要。

安装 daisyUI:

npm i -D daisyui@latest

然后，在你的tailwind.config.js文件里追加 daisyUI 的设置:

module.exports = {
  //...
  plugins: [require("daisyui")],
}

一旦你安装完成 daisyUI， 你可以通过btn, card等等来使用组件类。

1、不用再像这样通过 Tailwind 原生工具类来制作一个按钮:

<button
  class="inline-block cursor-pointer rounded-md bg-gray-800 px-4 py-3 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-900">
  Button
</button>

2、你可以直接使用组件类来这样做:

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

3、你可以通过增加 daisyUI 组件类来修改这个组件:

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

4、你也可以通过 TailwindCSS 的工具类来改变这个组件的样式:

<button class="btn w-64 rounded-full">Button</button>

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://web.fly63.com/nav/4026