daisyUI

安装 §

npm i -D daisyui@latest

daisyUI 依赖 Tailwind CSS 框架，需要同时安装，然后在 tailwind.config.js 配置文件中添加：

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

使用 §

导航栏顶部固定并模糊 §

导航栏组件：

<div class="navbar bg-base-100">
  <a class="btn btn-ghost text-xl">daisyUI</a>
</div>

修改后：

<div class="navbar sticky top-0 backdrop-blur-lg z-10">
  <a class="btn btn-ghost text-xl">daisyUI</a>
</div>

• sticky:使元素设置为粘性定位，使其在滚动时保持在屏幕上方
• top-0: 使元素的顶部边缘固定在父容器的顶部，即将其置于屏幕顶部
• backdrop-blur-lg: 使元素的背景模糊化
• z-10: 使元素的堆叠顺序设置为 10，使其位于其他具有默认堆叠顺序的元素之上

页脚固定 §

使用 flex-grow 实现：

<div class="flex flex-col h-screen">
    <div class="bg-red-500">header</div>
    <div class="bg-green-500 flex-grow">content</div>
    <div class="bg-blue-500">footer</div>
</div>