不要重复发明
轮子
每一次都如此 
在一个 Tailwind CSS 项目中，你需要为每个元素编写实用程序类名。仅仅为了样式化最基本的元素就需要成千上万的类名。
而不是编写
100 个类名
对于每个元素、每个页面、每个项目，
一次又一次…
使用 语义化
类名 
它具有描述性，更快、更简洁且更易于维护。
// Styling a simple button
<button class="">
Tailwind Button
</button>// 结果
不再有 丑陋的 HTML
编写更少的类名
使用组件类名
使用 Tailwind CSS 实用程序修改它们。
点击
<div class="w-80 rounded-lg bg-zinc-50 text-zinc-800">
<div class="flex flex-col gap-3 p-8">
<input placeholder="Email" class="w-full rounded-sm border border-zinc-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-zinc-700 focus:ring-offset-2 focus:ring-offset-zinc-100 focus:outline-none focus-visible:border-zinc-900"/>
<label class="flex cursor-pointer items-center text-sm gap-1.5 text-zinc-500">
<div class="relative inline-block h-5">
<input type="checkbox" class="peer h-5 w-8 cursor-pointer appearance-none rounded-full border border-zinc-400 peer-checked:bg-white checked:border-zinc-900 focus-visible:ring-2 focus-visible:ring-zinc-400 checked:focus-visible:ring-zinc-900 focus-visible:ring-offset-2 focus-visible:outline-none"/>
<span class="pointer-events-none absolute start-0.75 top-0.75 block size-[0.875rem] rounded-full bg-zinc-400 transition-all duration-200 peer-checked:start-[0.9375rem] peer-checked:bg-zinc-900"></span>
</div>
Submit to newsletter
</label>
<label class="flex cursor-pointer items-center text-sm gap-1.5 text-zinc-500">
<div class="relative inline-block h-5">
<input type="checkbox" class="peer h-5 w-8 cursor-pointer appearance-none rounded-full border border-zinc-400 peer-checked:bg-white checked:border-zinc-900 focus-visible:ring-2 focus-visible:ring-zinc-400 checked:focus-visible:ring-zinc-900 focus-visible:ring-offset-2 focus-visible:outline-none"/>
<span class="pointer-events-none absolute start-0.75 top-0.75 block size-[0.875rem] rounded-full bg-zinc-400 transition-all duration-200 peer-checked:start-[0.9375rem] peer-checked:bg-zinc-900"></span>
</div>
Accept terms of use
</label>
<button class="inline-block cursor-pointer rounded-sm bg-zinc-900 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-[0_.2rem_0.3rem_-.25rem_black] active:shadow-none transition duration-200 ease-in-out focus-visible:ring-2 focus-visible:ring-zinc-700 focus-visible:ring-offset-2 focus-visible:outline-none active:translate-y-[1px]" >Save</button>
</div>
</div>=
CSS 类名
仅 Tailwind 114
Tailwind + daisyUI 14
HTML 大小
仅 Tailwind 2110 字节
Tailwind + daisyUI 427 字节
<a class="btn btn-primary">Button</a>↓
<a class="btn btn-primary rounded-full">Button</a>纯 CSS。
框架无关。
随处可用。
daisyUI 是 Tailwind CSS 的插件。它适用于所有 JS 框架，并且不需要 JS 捆绑文件。
将 daisyUI 作为开发依赖项安装，并像使用任何其他 Tailwind CSS 类名一样使用类名。
