🛠️ 開発・MCP コミュニティ

daisyui

Tailwind CSS 4でウェブUIを迅速に開発するため、アクセシブルでテーマ対応の事前構築済みコンポーネントを提供するSkill。

📜 元の英語説明(参考)

CSS component library for Tailwind CSS 4 providing pre-built UI components with semantic class names. Use when building web interfaces with HTML/Tailwind that need: (1) Rapid UI development with consistent styling, (2) Accessible component patterns (buttons, forms, modals, etc.), (3) Theme-aware color systems that work across light/dark modes, (4) Responsive layouts with Tailwind utilities. Works with daisyUI v5+ which requires Tailwind CSS v4+.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Tailwind CSS 4でウェブUIを迅速に開発するため、アクセシブルでテーマ対応の事前構築済みコンポーネントを提供するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o daisyui.zip https://jpskill.com/download/6154.zip && unzip -o daisyui.zip && rm daisyui.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/6154.zip -OutFile "$d\daisyui.zip"; Expand-Archive "$d\daisyui.zip" -DestinationPath $d -Force; ri "$d\daisyui.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して daisyui.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → daisyui フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-17
取得日時: 2026-05-17
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

daisyUI 5

概要

daisyUI 5 は、Tailwind CSS 4 用の CSS コンポーネントライブラリで、一般的な UI コンポーネントのクラス名を提供します。これを使用すると、一貫性があり、アクセシブルで、テーマに対応したウェブインターフェースを迅速に構築できます。

インストール

daisyUI 5 には Tailwind CSS 4 が必要です。tailwind.config.js ファイルは Tailwind CSS v4 で非推奨になりました。

npm 経由でインストールします。

npm i -D daisyui@latest

CSS ファイルに追加します。

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

または CDN を使用します。

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

設定

基本設定

設定は不要です。デフォルトを使用します。

@plugin "daisyui";

ライトテーマのみ

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

ダークモードあり

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

全ての組み込みテーマ

@plugin "daisyui" {
  themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk;
  root: ":root";
  include: ;
  exclude: rootscrollgutter, checkbox;
  prefix: daisy-;
  logs: false;
}

HTML 要素にテーマを設定します。

<html data-theme="cupcake">

カスタムテーマ

https://daisyui.com/theme-generator/ のテーマジェネレーターを使用するか、手動で作成します。

@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;
}

使用ルール

HTML 要素に daisyUI クラス名を追加します（コンポーネント + パーツ + モディファイアークラス）。
Tailwind ユーティリティでカスタマイズします（例: btn px-10）。
特異性の問題がある場合は、最終手段として ! サフィックスを使用します（例: bg-red-500!）。
コンポーネントが存在しない場合は、Tailwind ユーティリティで構築します。
Tailwind プレフィックスでレイアウトをレスポンシブにします（例: sm:card-horizontal）。
daisyUI クラス名または Tailwind ユーティリティクラスのみを使用します。
理想的にはカスタム CSS は不要です。

追加のガイドライン

プレースホルダー画像には https://picsum.photos/{width}/{height} を使用します。
必要がない限り、カスタムフォントを追加しないでください。
必要がない限り、bg-base-100 text-base-content を body に追加しないでください。
デザインの決定については、Refactoring UI の書籍のベストプラクティスに従ってください。

クラス名のカテゴリ

daisyUI のクラス名は以下のカテゴリに分類されます（参照用であり、コードでは使用されません）。

component - 必須のコンポーネントクラス（例: btn、card）
part - コンポーネントの子パーツ（例: card-title、card-body）
style - 特定のスタイル（例: btn-outline、alert-soft）
behavior - 動作を変更します（例: btn-active、btn-disabled）
color - 色を設定します（例: btn-primary、alert-error）
size - サイズを設定します（例: btn-sm、input-lg）
placement - 配置を設定します（例: dropdown-top、modal-middle）
direction - 方向を設定します（例: tabs-horizontal、carousel-vertical）
modifier - コンポーネントを変更します（例: btn-wide、card-side）
variant - variant:utility-class の構文を持つユーティリティプレフィックス（例: is-drawer-open:w-64）

カラーシステム

セマンティックカラー名

primary / primary-content - メインブランドカラー
secondary / secondary-content - セカンダリブランドカラー
accent / accent-content - アクセントカラー
neutral / neutral-content - ニュートラルな UI 要素
base-100 - ベースの表面色（空白の背景）
base-200 - 標高のためのより暗いシェード
base-300 - 標高のためのさらに暗いシェード
base-content - 前景のコンテンツ色
info / info-content - 情報メッセージ
success / success-content - 成功状態
warning / warning-content - 警告状態
error / error-content - エラー状態

カラーのルール

daisyUI の色はテーマに対応しており、テーマによって変化します。
daisyUI の色には dark: プレフィックスは不要です。
red-500 のような Tailwind の色は、すべてのテーマで同じです。
text-gray-800 のような Tailwind のテキストカラーは、ダークテーマでは読みにくくなるため避けてください。
*-content の色は、関連する色に対して良好なコントラストを持っています。
ページの大部分には base-* の色を使用します。
重要な要素には primary の色を使用します。

一般的なコンポーネント

ボタン

<button class="btn btn-primary">Click me</button>
<button class="btn btn-outline btn-secondary">Cancel</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-lg">Large</button>

入力

<input type="text" placeholder="Type here" class="input input-bordered" />

カード

<div class="card bg-base-100 shadow-sm">
  <figure><img src="https://picsum.photos/400/250" alt="Card image" /></figure>
  <div class="card-body">
    <h2 class="card-title">Title</h2>
    <p>Content</p>
    <div class="card-actions">

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

daisyUI 5

Overview

daisyUI 5 is a CSS component library for Tailwind CSS 4 that provides class names for common UI components. Use it to rapidly build consistent, accessible, and theme-aware web interfaces.

Installation

daisyUI 5 requires Tailwind CSS 4. The tailwind.config.js file is deprecated in Tailwind CSS v4.

Install via npm:

npm i -D daisyui@latest

Add to your CSS file:

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

Or use CDN:

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

Configuration

Basic Config

No config needed - use defaults:

@plugin "daisyui";

Light Theme Only

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

With Dark Mode

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

All Built-in Themes

@plugin "daisyui" {
  themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk;
  root: ":root";
  include: ;
  exclude: rootscrollgutter, checkbox;
  prefix: daisy-;
  logs: false;
}

Set theme on HTML element:

<html data-theme="cupcake">

Custom Theme

Use the theme generator at https://daisyui.com/theme-generator/ or create manually:

@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;
}

Usage Rules

Add daisyUI class names to HTML elements (component + part + modifier classes)
Customize with Tailwind utilities (e.g., btn px-10)
Use ! suffix for specificity issues as last resort (e.g., bg-red-500!)
If component doesn't exist, build with Tailwind utilities
Make layouts responsive with Tailwind prefixes (e.g., sm:card-horizontal)
Only use daisyUI class names or Tailwind utility classes
Ideally no custom CSS needed

Additional Guidelines

Use https://picsum.photos/{width}/{height} for placeholder images
Don't add custom fonts unless necessary
Don't add bg-base-100 text-base-content to body unless necessary
For design decisions, follow Refactoring UI book best practices

Class Name Categories

daisyUI class names fall into these categories (reference only, not used in code):

component - Required component class (e.g., btn, card)
part - Child part of component (e.g., card-title, card-body)
style - Specific style (e.g., btn-outline, alert-soft)
behavior - Changes behavior (e.g., btn-active, btn-disabled)
color - Sets color (e.g., btn-primary, alert-error)
size - Sets size (e.g., btn-sm, input-lg)
placement - Sets placement (e.g., dropdown-top, modal-middle)
direction - Sets direction (e.g., tabs-horizontal, carousel-vertical)
modifier - Modifies component (e.g., btn-wide, card-side)
variant - Utility prefixes with syntax variant:utility-class (e.g., is-drawer-open:w-64)

Color System

Semantic Color Names

primary / primary-content - Main brand color
secondary / secondary-content - Secondary brand color
accent / accent-content - Accent color
neutral / neutral-content - Neutral UI elements
base-100 - Base surface color (blank backgrounds)
base-200 - Darker shade for elevations
base-300 - Even darker shade for elevations
base-content - Foreground content color
info / info-content - Informational messages
success / success-content - Success states
warning / warning-content - Warning states
error / error-content - Error states

Color Rules

daisyUI colors are theme-aware and change with theme
No need for dark: prefix with daisyUI colors
Tailwind colors like red-500 stay same on all themes
Avoid Tailwind text colors like text-gray-800 - unreadable on dark themes
*-content colors have good contrast on their associated colors
Use base-* colors for majority of page
Use primary color for important elements

Common Components

Button

<button class="btn btn-primary">Click me</button>
<button class="btn btn-outline btn-secondary">Cancel</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-lg">Large</button>

Input

<input type="text" placeholder="Type here" class="input input-bordered" />

Card

<div class="card bg-base-100 shadow-sm">
  <figure><img src="https://picsum.photos/400/250" alt="Card image" /></figure>
  <div class="card-body">
    <h2 class="card-title">Title</h2>
    <p>Content</p>
    <div class="card-actions">
      <button class="btn btn-primary">Action</button>
    </div>
  </div>
</div>

Modal

<button onclick="my_modal.showModal()">Open</button>
<dialog id="my_modal" class="modal">
  <div class="modal-box">
    <h3 class="font-bold">Title</h3>
    <p>Content</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

Alert

<div role="alert" class="alert alert-error">
  <svg class="w-6 h-6" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
  <span>Error message</span>
</div>

Navbar

<div class="navbar bg-base-200">
  <div class="navbar-start">Logo</div>
  <div class="navbar-center">Title</div>
  <div class="navbar-end">Menu</div>
</div>

Drawer

<div class="drawer lg:drawer-open">
  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">
    <label for="my-drawer" class="btn drawer-button lg:hidden">Open drawer</label>
    <!-- Page content -->
  </div>
  <div class="drawer-side">
    <label for="my-drawer" class="drawer-overlay"></label>
    <ul class="menu bg-base-200 min-h-full w-80 p-4">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
    </ul>
  </div>
</div>

Resources

references/

Component documentation and detailed examples:

components.md - Complete component reference with all class names, syntax, and usage rules for every daisyUI component (accordion, alert, avatar, badge, breadcrumbs, button, calendar, card, carousel, chat, checkbox, collapse, countdown, diff, divider, dock, drawer, dropdown, fab, fieldset, file-input, filter, footer, hero, hover-3d, hover-gallery, indicator, input, join, kbd, label, link, list, loading, mask, menu, mockup-browser, mockup-code, mockup-phone, mockup-window, modal, navbar, pagination, progress, radial-progress, radio, range, rating, select, skeleton, stack, stat, status, steps, swap, tab, table, text-rotate, textarea, theme-controller, timeline, toast, toggle, validator)

When working with a specific component, read components.md and search for that component's section.