What daisyUI is

daisyUI is a library of ready-made components for Tailwind CSS. Instead of a dozen utilities on every button you write one short class, btn, and daisyUI turns it into a styled button. This course covers daisyUI 5, which works with Tailwind CSS 4. It assumes you already know Tailwind: its utilities are not explained again here.

How daisyUI relates to Tailwind

Tailwind gives you building blocks — utilities like px-4 and bg-indigo-600. daisyUI plugs into it as a plugin — an add-on that brings new classes. These are component classes: buttons, cards, menus, modals. Inside they are made of the same CSS properties as the utilities.

Both sets of classes work together: a component sets the base, utilities add to it.

Trying it from a CDN

A CDN is a server that hands out library files by URL. For learning, two lines at the top of the page are enough: the daisyUI CSS file and the Tailwind browser build. Create an index.html file and paste:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<button class="btn btn-primary">Enroll in a course</button>

Under the code you see a purple button with rounded corners, a shadow and a hover effect. The first line loads every daisyUI component plus two themes, light and dark; the second loads the Tailwind utilities.

Every example in this course starts with these lines, so a live page works under each of them. Real projects do not work this way: the CDN file contains all components at once and weighs about a megabyte. The next lesson covers installing with npm.

Components and utilities together

Tailwind utilities go right next to component classes:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex gap-2 p-4">
  <button class="btn btn-primary">Enroll</button>
  <button class="btn">Learn more</button>
</div>

flex gap-2 p-4 are plain Tailwind utilities that put the buttons in a row. btn is the default grey button, and btn-primary repaints it in the primary color.

What the course covers

The running example is a small online course platform called LearnUp. You will build a landing page with a menu, course cards and a sign-up form, and then a student dashboard: a sidebar, tabs, a table and stats. Along the way you will cover themes, forms and building the project.

Common mistake

Loading the daisyUI CSS file and forgetting the Tailwind script:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
 
<div class="flex gap-2 p-4">
  <button class="btn btn-primary">Enroll</button>
  <button class="btn">Learn more</button>
</div>

The buttons are styled, but they touch each other and have no padding around them: the component classes live in the daisyUI file, while the flex, gap-2 and p-4 utilities are generated only by Tailwind. Load both lines.