DaisyUI is a UI framework built on top of tailwindcss to ease the creation of components using tailwind's classes.

Using traditional tailwindcss, writing a generic button looks like this:

<button class="p-3 rounded text-base bg-blue-600 text-blue-200 upercase transition transform hover:scale-105 duration-150">
my button</button>

This makes your HTML bloated and hard to read. To solve this, daisyUI provides premade and highly customizable components, reducing the number of classes we use to build components. The above code can be rewritten with daisyUI as:

<button class="btn">
my button</button>

Installing DaisyUI

This guide assumes you aleady have tailwindcss installed

In the terminal, enter the code:

npm install daisyui

This installs the daisyUI plugin. Now, in your tailwind.config.js file, include the plugin:

// tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  theme: {
    extend: {},
  },
  plugins: [  require("daisyui") ],


};

This adds DaisyUI's classes to tailwindcss and you can now start using component classes like btn &  btn-primary in your code.