一款Tailwind CSS 插件、帮助你用更少的代码,更快地构建应用程序daisyUI-夜雨聆风

一款Tailwind CSS 插件、帮助你用更少的代码,更快地构建应用程序daisyUI

我能为你提供什么服务？

网站建设 | 小程序开发 | 软件定制

我是鹏魔王，一个做网站、小程序的程序员，记录生活日常、及技术分享。

本欲起身离红尘，奈何影子落人间，欢迎关注

想用 Tailwind CSS 制作一个卡片，需要为每一条 CSS 规则编写一个或多个工具类名。然后为每个元素、每个页面、每个项目反复这样做，耗时耗力。这样做维护代码变得麻烦，总是需要弄清楚哪部分代码对应哪部分 UI。有痛点就有人会想办法，daisyUI 通过提供基于 UI 部分命名的高级类名来解决这个问题。

例如，要制作一个卡片，我们只需使用 card 类名，daisyUI 就会提供制作卡片所需的所有 CSS 规则。然后，如果你要额外的定制，可以向该元素添加 Tailwind CSS 工具类，使其看起来像你想要的样子。

daisyUI 不是 Tailwind CSS 的替代品，而是一个使其更强大、更易于使用的插件。

你之前写个这个卡片可能需要，这么多类名

<divclass="w-80 rounded-lg bg-zinc-50 text-zinc-800">  <divclass="flex flex-col gap-3 p-8">    <inputplaceholder="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"/>    <labelclass="flex cursor-pointer items-center text-sm gap-1.5 text-zinc-500">      <divclass="relative inline-block h-5">        <inputtype="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"/>        <spanclass="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>      订阅新闻邮件    </label>    <labelclass="flex cursor-pointer items-center text-sm gap-1.5 text-zinc-500">      <divclass="relative inline-block h-5">        <inputtype="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"/>        <spanclass="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>      接受使用条款    </label>    <buttonclass="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]" >保存</button>  </div></div>

使用Tailwind CSS + daisyUI只需这样

<divclass="card w-80 bg-base-200">  <divclass="card-body gap-3">    <inputplaceholder="Email"class="input" />    <labelclass="label">      <inputtype="checkbox"class="toggle toggle-sm" />      订阅新闻邮件    </label>    <labelclass="label">      <inputtype="checkbox"class="toggle toggle-sm" />      接受使用条款    </label>    <buttonclass="btn btn-neutral">保存</button>  </div></div>