A skill for using DaisyUI 5.5, a component library for Tailwind CSS 4 that provides semantic class names for common UI components with built-in theming support. Use when building responsive web interfaces with pre-styled components, implementing theme switching, or creating consistent design systems without writing custom CSS.
A skill for using DaisyUI 5.5, a component library for Tailwind CSS 4 that provides semantic class names for common UI components with built-in theming support. Use when building responsive web interfaces with pre-styled components, implementing theme switching, or creating consistent design systems without writing custom CSS.
DaisyUI is the most popular free and open-source component library for Tailwind CSS, providing human-friendly semantic class names for common UI components with built-in theming support. Version 5 requires Tailwind CSS 4 and uses the @plugin directive instead of the deprecated tailwind.config.js.
With over 65 components, 500+ utilities, and 35 built-in themes, DaisyUI enables rapid UI development using only HTML class names — no custom CSS or JavaScript required for most patterns. It works with any framework (React, Vue, Svelte, Next.js, plain HTML) and any build tool or no build tool at all.
When to Use
Building responsive web interfaces quickly with pre-styled, accessible components
Implementing light/dark theme switching without writing custom CSS
Creating consistent design systems on top of Tailwind CSS
Prototyping UIs without a build step (via CDN)
Migrating from Bootstrap or other component libraries to Tailwind CSS
Adding semantic class names (btn, card, navbar) instead of long utility class strings
Installation / Setup
Node.js (recommended)
Install as a development dependency, then add the plugin directive to your CSS:
@import"tailwindcss";
@plugin"daisyui";
This is all that's needed. No tailwind.config.js file — Tailwind CSS v4 deprecated it entirely.
CDN (no build step)
For prototyping, documentation sites, or static pages:
themes — List of themes to enable. Use --default for the default theme and --prefersdark for the automatic dark mode theme. All other listed themes can be activated with data-theme="name" on <html>.
root — CSS selector where theme variables are applied (default: :root).
include — Specific components to include (comma-separated). Leave empty for all.
exclude — Components or utilities to exclude (e.g., rootscrollgutter, checkbox).
prefix — Class name prefix for all daisyUI classes (e.g., daisy- makes btn into daisy-btn).
logs — Enable/disable console logging (true or false).
DaisyUI provides semantic color names that adapt automatically to the active theme. Use these instead of Tailwind's raw color names (like red-500) so colors change with themes.
Color Roles
primary / primary-content — Main brand color and its foreground text color
secondary / secondary-content — Secondary brand color and its foreground
accent / accent-content — Accent color and its foreground
neutral / neutral-content — Neutral dark color for non-saturated UI parts
base-100 — Primary surface/background color
base-200 — Slightly darker base, for elevations
base-300 — Even darker base, for deeper elevations
