メニュー
DaisyUI v5 component library for Tailwind CSS — semantic UI classes, themes, layout patterns, drawer/sidebar gotchas, and component quick reference. Use when building, styling, or debugging UI with DaisyUI, Tailwind components, or DaisyUI themes.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/shermanhuman/oh --skill daisyuiコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Semver release workflow — bump version, tag, push, verify CI. Use when releasing, bumping version, updating version, or when the user says 'release', 'bump', 'major', 'minor', 'patch', 'update version', 'new version', 'cut a release', 'tag', or 'goreleaser'.
Mise dev tool manager — installing tools, running mise-managed commands, and configuring .mise.toml. Use when installing tools, running CLI commands that aren't found, or setting up project environments.
Reference for the promptherder CLI — syncs AI agent rules, skills, and workflows from herd repos to agent targets. Use when installing, updating, or troubleshooting prompt distribution.
SKILL.md を表示中
SOC 職業分類に基づく
| name | daisyui |
| description | DaisyUI v5 component library for Tailwind CSS — semantic UI classes, themes, layout patterns, drawer/sidebar gotchas, and component quick reference. Use when building, styling, or debugging UI with DaisyUI, Tailwind components, or DaisyUI themes. |
DaisyUI is a Tailwind CSS plugin that adds semantic component classes (e.g. btn, card, drawer) so you write less utility soup. Version 5 targets Tailwind CSS v4, uses zero JS, and relies purely on CSS.
For full docs on any component, fetch the raw markdown from GitHub:
https://raw.githubusercontent.com/saadeghi/daisyui/refs/heads/master/packages/docs/src/routes/(routes)/components/{COMPONENT}/+page.md
Replace {COMPONENT} with: drawer, navbar, button, menu, modal, card, table, badge, alert, dropdown, indicator, toggle, tooltip, tab, collapse, etc.
Full list: https://daisyui.com/components/
/* app.css — Tailwind v4 */
@import "tailwindcss";
@plugin "daisyui";
Install via npm: npm i -D daisyui@latest
DaisyUI provides component-level classes instead of raw Tailwind utilities:
<button class="btn btn-primary">Click me</button>
data-theme="themename" on any element (typically <html>)light, dark, cupcake, dracula, nord, corporate, business, etc.primary, secondary, accent, neutral, base-100/200/300, info, success, warning, error-content variant for text on that background (e.g. primary-content)-xs, -sm, -md, -lg, -xl-outline, -ghost, -soft, -dashThe .drawer-side component uses CSS grid internally. Its justify-items: start and > * selectors override Tailwind positioning classes like right-2 and even !left-auto.
Do NOT use position: absolute inside a drawer sidebar. Use flexbox instead:
<!-- ✅ Flexbox: container pushes button right naturally -->
<aside class="flex flex-col ...">
<div class="flex justify-end px-2 pt-2.5">
<button class="flex items-center justify-center w-6 h-6 rounded">
<!-- icon -->
</button>
</div>
<ul class="menu w-full grow">
...
</ul>
</aside>
<!-- ❌ Fragile: fights the drawer's grid layout -->
<button
class="absolute top-3"
style="right: 8px !important; left: auto !important;"
></button>
.btn for custom-positioned elements in drawersThe .btn class sets layout properties that conflict with custom positioning inside a drawer. Use manual styling instead:
<!-- ❌ btn fights positioning in drawer -->
<button class="btn btn-ghost btn-xs absolute right-2">
<!-- ✅ Manual styling avoids conflicts -->
<button
class="flex items-center justify-center w-6 h-6 rounded hover:bg-base-300"
></button>
</button>
The drawer has a mandatory element order. It will break if elements are rearranged:
.drawer // Root grid container
├── .drawer-toggle // Hidden checkbox (controls open/close)
├── .drawer-content // Main page content
│ └── (navbar, content, etc.)
└── .drawer-side // Sidebar container
├── .drawer-overlay // Click-to-close overlay
└── (sidebar content) // Your menu/aside
lg:drawer-open — sidebar always visible at lg+ breakpoint, overlay on smaller screensDaisyUI v5 provides state-aware modifiers:
<div class="drawer-side is-drawer-close:overflow-visible">
<div class="is-drawer-close:w-14 is-drawer-open:w-64">
<span class="is-drawer-close:hidden">Label Text</span>
</div>
</div>
<div class="navbar bg-base-200">
<div class="navbar-start"><!-- left --></div>
<div class="navbar-center"><!-- center --></div>
<div class="navbar-end"><!-- right --></div>
</div>
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-ghost btn-sm">Small Ghost</button>
<button class="btn btn-outline btn-error">Error Outline</button>
<button class="btn btn-square btn-sm">□</button>
<button class="btn btn-circle btn-sm">○</button>
<ul class="menu bg-base-200 w-56">
<li><a>Item 1</a></li>
<li class="menu-title">Section Title</li>
<li><a>Item 2</a></li>
<li><a class="active">Active Item</a></li>
</ul>
<div class="card bg-base-100 card-border">
<div class="card-body">
<h2 class="card-title">Title</h2>
<p>Content</p>
<div class="card-actions justify-end">
<button class="btn btn-primary">Action</button>
</div>
</div>
</div>
<button class="btn" onclick="my_modal.showModal()">Open</button>
<dialog id="my_modal" class="modal">
<div class="modal-box">
<h3 class="text-lg font-bold">Title</h3>
<p>Content</p>
<div class="modal-action">
<form method="dialog"><button class="btn">Close</button></form>
</div>
</div>
<form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>
<details class="dropdown">
<summary class="btn m-1">Click</summary>
<ul
class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2 shadow"
>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</details>
<div class="overflow-x-auto">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Data</td>
</tr>
<tr class="row-hover">
<td>Hoverable</td>
<td>Row</td>
</tr>
</tbody>
</table>
</div>
Modifiers: table-zebra, table-xs/sm/md/lg, table-pin-rows, table-pin-cols
<span class="badge badge-primary">label</span>
<span class="badge badge-error badge-xs">3</span>
<div class="indicator">
<span class="indicator-item badge badge-error badge-xs">9+</span>
<button class="btn">Inbox</button>
</div>
<div class="alert alert-info"><span>Info message</span></div>
<div class="alert alert-error alert-soft"><span>Soft error</span></div>