daisyUI adds component class names to Tailwind CSS
so you can make beautiful websites faster than ever.
In a Tailwind CSS project, you need to write utility class names for every element. Thousands of class names just to style the most basic elements.
For every element, every page, every project,
again and again…
It's descriptive, faster, cleaner and easier to maintain.
// Styling a simple button
<button class="">
Tailwind Button
</button>
Write fewer class names
Use component class names
modify them using Tailwind CSS utilities.
<div class="w-80 rounded-2xl bg-gray-100">
<div class="flex flex-col gap-2 p-8">
<input placeholder="Email" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2 focus:ring-offset-gray-100" />
<label class="flex cursor-pointer items-center justify-between p-1">
Accept terms of use
<div class="relative inline-block">
<input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />
<span class="pointer-events-none absolute start-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:start-7 peer-checked:bg-gray-900"></span>
</div>
</label>
<label class="flex cursor-pointer items-center justify-between p-1">
Submit to newsletter
<div class="relative inline-block">
<input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />
<span class="pointer-events-none absolute start-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:start-7 peer-checked:bg-gray-900"></span>
</div>
</label>
<button class="inline-block cursor-pointer rounded-md bg-gray-700 px-4 py-3.5 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 focus-visible:ring-offset-2 active:scale-95">Save</button>
</div>
</div>
With daisyUI, you write 80% fewer class names
And your HTML size will be about 70% smaller.
daisyUI is built on top of Tailwind CSS so you can customize everything using utility classes.
<a class="btn btn-primary">Button</a>
<a class="btn btn-primary rounded-full">Button</a>
daisyUI is a plugin for Tailwind CSS. It works on all JS frameworks and doesn't need a JS bundle file.
Install daisyUI as a dev dependency and use the class names just like any other Tailwind CSS class name.
Your website should be unique. Create a custom theme for yourself using daisyUI theme generator. The colors you pick will be applied to all daisyUI components.
Mix and match daisyUI class names to create unique web pages.