基于 TailwindCSS，但是代码简洁，效果也简洁，内置浅色和深色等主题。
个人认为比 LayUI 好多了。
在 <head> 添加以下代码就可以用了。
```
<link href="https://fastly.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://fastly.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
```我这里写了一个无聊的演示
```
<!DOCTYPE html>
<html>
<head>
<link href="https://fastly.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://fastly.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="p-4">
<label class="flex cursor-pointer gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="5" />
<path
d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
</svg>
<input type="checkbox" value="dark" class="toggle theme-controller" />
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</label>
</div>
<div class="p-4">
<button class="btn">没用的按钮</button>
<button class="btn" popovertarget="popover-1" style="anchor-name:--anchor-1">
有用的按钮
</button>
<ul class="dropdown menu w-52 rounded-box bg-base-100 shadow-sm"
popover id="popover-1" style="position-anchor:--anchor-1">
<li><a>没用的按钮</a></li>
<li><a href="https://nodeloc.com">有用的按钮</a></li>
</ul>
<div class="tooltip" data-tip="Wow!">
<button class="btn">Hello?</button>
</div>
<fieldset class="fieldset">
<legend class="fieldset-legend">How Are You?</legend>
<input type="text" class="input" placeholder="I'm fine." />
</fieldset>
<div class="filter">
<input class="btn filter-reset" type="radio" name="metaframeworks" aria-label="All"/>
<input class="btn" type="radio" name="metaframeworks" aria-label="Sveltekit"/>
<input class="btn" type="radio" name="metaframeworks" aria-label="Nuxt"/>
<input class="btn" type="radio" name="metaframeworks" aria-label="Next.js"/>
</div>
<progress class="progress w-56"></progress>
<span class="loading loading-spinner text-primary"></span>
<span class="loading loading-spinner text-secondary"></span>
<span class="loading loading-spinner text-accent"></span>
<span class="loading loading-spinner text-neutral"></span>
<span class="loading loading-spinner text-info"></span>
<span class="loading loading-spinner text-success"></span>
<span class="loading loading-spinner text-warning"></span>
<span class="loading loading-spinner text-error"></span>
<input type="checkbox" checked="checked" class="checkbox checkbox-primary" />
<input type="checkbox" checked="checked" class="checkbox checkbox-secondary" />
<input type="checkbox" checked="checked" class="checkbox checkbox-accent" />
<input type="checkbox" checked="checked" class="checkbox checkbox-neutral" />
<input type="checkbox" checked="checked" class="checkbox checkbox-info" />
<input type="checkbox" checked="checked" class="checkbox checkbox-success" />
<input type="checkbox" checked="checked" class="checkbox checkbox-warning" />
<input type="checkbox" checked="checked" class="checkbox checkbox-error" />
</div>
<div class="p-4">
<div role="alert" class="alert alert-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>I Love NodeLoc.</span>
</div>
</div>
<div class="flex w-52 flex-col gap-4 p-4">
<div class="skeleton h-32 w-full"></div>
<div class="skeleton h-4 w-28"></div>
<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-full"></div>
</div>
<div class="mockup-browser border-base-300 border w-full">
<div class="mockup-browser-toolbar">
<div class="input">https://nodeloc.com/hello.php</div>
</div>
<div class="grid place-content-center border-t border-base-300 h-80">Hello!</div>
</div>
</body>
</html>
```官方文档：https://daisyui.com/docs