daisyUI 5

daisyUI 5 is a CSS library for Tailwind CSS 4 that provides class names for common UI components.

• daisyUI 5 docs
• daisyUI 5 release notes

When to use this skill

Use this skill when:

• Building UI components with daisyUI 5
• Need reference for daisyUI class names and usage rules
• Customizing themes with daisyUI config
• Understanding daisyUI color system
• Following best practices for daisyUI component styling
• Refactoring UI with daisyUI components
• Learning how to use daisyUI 5 effectively in Tailwind CSS 4 projects

Installation

install guide

1. daisyUI 5 requires Tailwind CSS 4
2. tailwind.config.js is deprecated in Tailwind CSS v4. Use CSS file only.
3. Install: npm i -D daisyui@latest
4. CSS file setup:

@import "tailwindcss";
@plugin "daisyui";

CDN alternative:

<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>

Usage Rules

1. Style elements by adding component class + part classes + modifier classes
2. Customize with Tailwind CSS utility classes (e.g., btn px-10)
3. Use ! suffix to override specificity issues (e.g., btn bg-red-500!) - last resort
4. Create custom components with Tailwind utilities if daisyUI doesn't have it
5. Use Tailwind responsive prefixes for flex and grid layouts
6. Only use daisyUI class names or Tailwind CSS utility classes
7. Avoid custom CSS - prefer daisyUI/Tailwind classes
8. Placeholder images: https://picsum.photos/200/300
9. Don't add custom fonts unless necessary
10. Don't add bg-base-100 text-base-content to body unless necessary
11. Follow Refactoring UI best practices

Class Name Categories

• component: required component class
• part: child part of component
• style: specific style modifier
• behavior: behavior modifier
• color: color modifier
• size: size modifier
• placement: placement modifier
• direction: direction modifier
• modifier: general modifier
• variant: conditional prefix (syntax: variant:utility-class)

Config

config docs

Basic:

@plugin "daisyui";

Light theme only:

@plugin "daisyui" {
	themes: light --default;
}

Full config:

@plugin "daisyui" {
	themes:
		light --default,
		dark --prefersdark;
	root: ":root";
	include:;
	exclude:;
	prefix:;
	logs: true;
}

Colors

Color Names

Color Rules

1. Use in utility classes like bg-primary, text-base-content
2. Colors change automatically based on theme
3. No need for dark: prefix with daisyUI colors
4. Avoid Tailwind color names (e.g., red-500) - they don't adapt to themes
5. Use base-* colors for majority of page, primary for important elements

Custom Theme

@plugin "daisyui/theme" {
	name: "mytheme";
	default: true;
	prefersdark: false;
	color-scheme: light;

	--color-base-100: oklch(98% 0.02 240);
	--color-base-200: oklch(95% 0.03 240);
	--color-base-300: oklch(92% 0.04 240);
	--color-base-content: oklch(20% 0.05 240);
	--color-primary: oklch(55% 0.3 240);
	--color-primary-content: oklch(98% 0.01 240);
	--color-secondary: oklch(70% 0.25 200);
	--color-secondary-content: oklch(98% 0.01 200);
	--color-accent: oklch(65% 0.25 160);
	--color-accent-content: oklch(98% 0.01 160);
	--color-neutral: oklch(50% 0.05 240);
	--color-neutral-content: oklch(98% 0.01 240);
	--color-info: oklch(70% 0.2 220);
	--color-info-content: oklch(98% 0.01 220);
	--color-success: oklch(65% 0.25 140);
	--color-success-content: oklch(98% 0.01 140);
	--color-warning: oklch(80% 0.25 80);
	--color-warning-content: oklch(20% 0.05 80);
	--color-error: oklch(65% 0.3 30);
	--color-error-content: oklch(98% 0.01 30);

	--radius-selector: 1rem;
	--radius-field: 0.25rem;
	--radius-box: 0.5rem;
	--size-selector: 0.25rem;
	--size-field: 0.25rem;
	--border: 1px;
	--depth: 1;
	--noise: 0;
}

Theme generator: https://daisyui.com/theme-generator/

Component Index

Load component docs on-demand from components/ folder.