DaisyUI - Make Tailwind components with ease!

When TailwindCSS hit the world, developers were brought to a world of utility classes. Allowing them to move swiftly and produce amazing looking content. I've always found Tailwind to be messy, hard to follow, and bloats code lines. This is fine if you spend a lot of time with Tailwind as with any language you learn the syntax, but I am always looking for an easy way to do something... Which is where Daisy UI comes in.

Prefer video content over a blog? Check it out below.

What is DaisyUI?

DaisyUI is a Tailwind plugin that allows you to create Clean HTML with component classes, that is built on pure CSS. It also has themes that we all love like dracula , dark , cupcake . In other words no need to deal with 100s of utility classes to create something, but you still have access to them.

How to setup DaisyUI?

DaisyUI is a tailwind plugin, so it requires minimal setup. First step, make sure you have a project setup with tailwindCSS. Then install DaisyUI

npm i daisyui
shell

Then the final step is to register DaisyUI as a plugin in your tailwindcss.config

module.exports = {
...
    plugins: [
      require('daisyui'),
    ],
...
  }
javascript

Now you are ready to start using it.

DaisyUI vs Utility Classes

A button

What makes DaisyUI so appealing is the ability to cut down the amount of classes added to an element for example a button:In Tailwind to create a link that is a rounded button that is purple it would look similar to this :

<a
    class="inline-block px-4 py-3
    text-sm font-semibold text-center
    text-white uppercase transition
    duration-200 ease-in-out
    bg-indigo-100 rounded-md
    cursor-pointer
    hover:bg-indigo-600"
    >Button</a
>
html

Which is a lot for a button, sure you could make this into a reusable component but if someone came along and read this there is a lot to read through before fully comprehending what is happening. In DaisyUI you can set a link as a rounded button with 5% of the code used above for example:

<a class="btn btn-primary">Button</a>
javascript

Toggle Switches

If you wanted a toggle switch in Tailwind you would have to write something similar:

<div class="relative">
    <input type="checkbox" class="peer
    appearance-none cursor-pointer
    border border-gray-300 rounded-full
    checked:border-gray-900 w-12 h-7"/>
    <span class="peer-checked:left-6
    peer-checked:bg-gray-900
    transition-all duration-500
    pointer-events-none w-5 h-5
    block absolute top-1 left-1
    rounded-full bg-gray-300"></span>
  </div>

Again hard to parse unless you are truly using Tailwind frequently. In Daisy UI it's again much smaller

<input type="checkbox" class="toggle"/>

My Thoughts

As a big fan of Chakra-UI it's hard to get me to pull away from such a beautiful component based framework that I am so familiar with. DaisyUI will almost guarantee that in the future I will be checking out TailwindCSS for projects, it's use of extendable components reduces the barrier of entry, an important requirement in 2021.

James Perkins

James is a developer advocate, who helps developers understand the Jamstack, and how it can be used to build a faster web.

Leave a Comment

0 comments
    HomeBlogAnalytics

    © 2022 James Perkins. All rights reserved

    Powered by TinaCMS