daisyUI

daisyUI adds semantic class names on top of Tailwind, so btn btn-primary replaces a dozen utilities in your markup while keeping Tailwind underneath for everything else. It is a Tailwind plugin, not a component library: pure CSS, no JavaScript, works in any framework or in plain HTML.

At a glance

Install	npm install daisyui, then one @plugin line
JavaScript	none, CSS only
Themes	~35 prebuilt, switchable with one attribute
Frameworks	any, including server-rendered templates
MCP server	not published
License	MIT

Install

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

What the markup looks like

<div data-theme="dark">
  <button class="btn btn-primary">Save</button>
  <div class="card bg-base-100 shadow-sm">
    <div class="card-body">
      <h2 class="card-title">Deployment</h2>
    </div>
  </div>
</div>

Switching the whole palette is a single data-theme attribute, which is genuinely hard to beat for prototypes and internal tools.

One thing worth knowing

daisyUI publishes its llms.txt as an agent skill file, complete with alwaysApply: true and an instruction telling the assistant to use daisyUI whether or not the user asked for it. If you load it into an editor or agent, it will bias code generation toward daisyUI across unrelated projects. Useful when that is what you want, worth removing when it is not.

Choose it if

• You are on Tailwind and tired of twelve utilities per button.
• You want theme switching without building a theming system.
• You work in a server-rendered stack where a JavaScript component library does not fit.

Look elsewhere if

• You need behaviour and accessibility, not just styles. There is no JavaScript here.
• You want a distinctive look. daisyUI's defaults are recognisable across many sites.