01 daisyUI デザインシステムのインターフェースプレビュー Emerald、Lo-fi、Night を切り替え、ワークショップカードを編集して、ローカルの下書きを確認できます。
Tailwind CSS 4.3.3 でコンパイルした公式のdaisyUI 5.7.47クラスを使用し、アプリケーションの動作にはプレーンなJavaScriptを使用しています。·
実装リファレンス 02
daisyUI デザインシステムのデザインリファレンス Tailwind CSS 4.3.3 でビルドしたdaisyUI 5.7.47。記載されている色と形状の値は、バンドルされた Emerald テーマのものです。Lo-fi と Night では意図的に異なる値を定義しています。ページのタイポグラフィと余白には、Tailwind と互換性のある寸法を使った独自の値を採用しています。
名前 / ルール 値 / 設定 用途 --color-base-100oklch(100% 0 0)主要なコンポーネント表面。 --color-base-200oklch(93% 0 0)この例のページ表面。 --color-base-300oklch(86% 0 0)表面の境界線。 --color-base-contentoklch(35.519% 0.032 262.988)ベースとなる表面上のテキスト。 --color-primaryoklch(76.662% 0.135 153.45)メインアクションと招待状の背景。 --color-primary-contentoklch(33.387% 0.04 162.24)プライマリカラーと組み合わせるテキスト。 --color-secondaryoklch(61.302% 0.202 261.294)セカンダリロール。 --color-secondary-contentoklch(100% 0 0)secondary と組み合わせるテキスト。 --color-accentoklch(72.772% 0.149 33.2)アクセントの役割。 --color-accent-contentoklch(0% 0 0)accent と組み合わせるテキスト。 --color-neutraloklch(35.519% 0.032 262.988)ニュートラルの強調。 --color-neutral-contentoklch(98.462% 0.001 247.838)neutral と組み合わせるテキスト。 --color-infooklch(72.06% 0.191 231.6)情報ロール。 --color-successoklch(64.8% 0.15 160)成功状態の役割。 --color-warningoklch(84.71% 0.199 83.87)警告ロール。 --color-erroroklch(71.76% 0.221 22.18)エラー状態の役割。
名前 / ルール 値 / 設定 用途 --radius-selector1remチェックボックスやトグルなどのセレクターの角丸。 --radius-field0.5rem入力欄やボタンなどのフィールドの角丸。 --radius-box1remカードやモーダルのボックスの角丸。 --size-selector0.25remコンポーネントの計算に使用するセレクターの基本サイズ。 --size-field0.25remコンポーネントの計算に使用するフィールドの基本サイズ。 --border1pxコンポーネントの境界線の幅。 --depth0Emerald では奥行き効果を無効にしています。 --noise0Emerald ではノイズ効果を無効にしています。
名前 / ルール 値 / 設定 用途 Page spacing32px desktop / 24px 16px mobile独自の構成であり、daisyUIの余白トークンシステムとは別です。 Main heading36px / 1.1; 30px below 700pxコンポーネントのデフォルト設定を上回る、独自の階層構造。 Invitation title34px / 1.15; 30px on mobile長い単語の折り返しに対応した、独自の大きな文字。 Supporting copy14px / 1.6読みやすさを重視した独自の説明文。 Layout breakpoint700px独自の、2カラムから縦積みへ切り替わるブレークポイントであり、daisyUIのブレークポイントトークンではありません。
03 daisyUI デザインシステム完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
DESIGN-daisyui.md 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
ガイドをダウンロード daisyUI デザインシステム — Tailwind CSSのセマンティックなコンポーネントクラス Tailwind のセマンティックなコンポーネントクラス CSS daisyUIは Tailwind プラグインを通じてコンポーネントクラスを提供します。バージョン5では設定をCSSに記述し、tailwindcss をインポートしてから daisyui プラグインと有効にするテーマを宣言します。この例では btn、card、fieldset、range、checkbox、join、modal を使用し、独自のセレクターで各コンポーネントの外観を再現していません。
このプラグインは、アプリケーションの状態管理を担うものではありません。この招待状スタジオをインタラクティブにしているのは、ネイティブ入力、ブラウザーの入力検証、ダイアログのメソッド、そして小さなJavaScriptモジュールです。ライブラリを選ぶ際には、この違いが重要です。コンポーネント層がCSSであるため複数のフレームワークと連携できますが、クラス名だけでサーバー側の処理が実装されるわけではありません。
関連する仕様を確認する
daisyUI デザインシステム — 色付きの各表面を、その上に載せるコンテンツの役割と組み合わせる 色付きの各表面を、その上に載せるコンテンツの役割と組み合わせる 招待状カードでは bg-primary と text-primary-content を組み合わせています。役割を示す帯では、secondary、accent、neutral についても同様の組み合わせを繰り返しています。これらは連動するセマンティックな役割であり、すべてのコンポーネントにコピーする単一の固定パレットではありません。有効な別のテーマを選ぶと、カードのマークアップを変えずに基盤の変数が切り替わります。
Emerald の primary は明るい緑、primary-content は濃い緑です。primary の背景すべてに自動的に白いテキストを載せると、テーマが意図したコンテンツの役割を無視することになります。仕様表には、インストール済みの Emerald テーマの実際の OKLCH 値を記載しています。推測したブランドカラーの16進数値に置き換えてはいません。
関連する仕様を確認する
daisyUI デザインシステム — 提供するテーマをコンパイルする 提供するテーマをコンパイルする CSSプラグインの設定では、デフォルトの Emerald に加え、Lo-fi と Night を有効にしています。セレクトコントロールは、ドキュメント要素の data-theme を変更します。メニューに表示されるのは、コンパイル済みのテーマのみです。ビルドしていないテーマ名を選んでも、対応するCSSが生成されるわけではありません。
テーマには、角丸、フィールドサイズ、境界線、エフェクトの変数も含まれます。そのため、EmeraldからLo-fiに切り替えると、色見本だけでなく、ほかの要素も変化します。埋め込み領域だけにテーマを適用するには、htmlではなくその領域にdata-themeを設定します。この単独のサンプルでは、意図的にドキュメント全体に適用しています。
daisyUIのプラグインブロックで、使用するテーマをコンパイルします。 コンポーネントのマークアップでは、意味に沿った背景クラスとコンテンツクラスを使います。 data-themeを変更し、コントロール、背景層、テキストをまとめて確認します。 関連する仕様を確認する
daisyUIデザインシステム：セレクター、フィールド、ボックスの角丸は個別に設定 セレクター、フィールド、ボックスの角丸はそれぞれ別 Emeraldでは、radius-selectorは1rem、radius-fieldは0.5rem、radius-boxは1remに設定されています。size-selectorとsize-fieldは、コンポーネントの計算に使う0.25rem単位の基準値です。これらの値は、ページのセクション間の余白とは別のものです。この仕様では、コンポーネントの形状と元のワークベンチのレイアウトを分けています。
周囲のページには、システムフォントのサンセリフ体、大きなエディトリアル見出し、2カラム構成を使用しています。daisyUIでこの見出し階層を使う必要はありません。元の700pxブレークポイントでは、エディターの下に案内を配置します。スクリーンショットに収めるために設定を隠すのではなく、すべての入力欄と操作を表示します。
関連する仕様を確認する
daisyUIデザインシステム：CSSの検証はブラウザーの制約を反映 CSSの検証はブラウザーの制約を反映 タイトル入力欄は必須で、最小文字数と最大文字数が設定されています。無効状態はvalidatorクラスとvalidator-hintで示しますが、ネイティブの制約を適用するのはブラウザーです。確認ボタンの汎用的なクリックハンドラーで、フォームの検証を回避することはありません。
通常の検証を通過した後、送信ハンドラーでタイトルの前後の空白を取り除き、有効な文字数を確認します。これにより、空白のみの文字列が、空白を除去しないminlengthの条件を満たしてしまうケースを検出できます。次の入力イベントでカスタムの検証メッセージをクリアするため、タイトルを修正すれば送信できます。ユーザーの入力内容はtextContentで表示し、HTMLとして挿入することはありません。
関連する仕様を確認する
daisyUIデザインシステム：実際のダイアログに確認用スナップショットを表示 実際のダイアログに確認用スナップショットを表示 「招待状を確認」を選ぶと、現在のタイトル、形式、参加人数、素材をスナップショットにコピーしてから、dialog.showModalを呼び出します。modalクラスでdaisyUIのスタイルを適用し、ダイアログの標準動作はブラウザーに任せます。aria-labelledbyで見出しをダイアログのラベルとして指定します。Escapeキーを押せば、保存せずに確認画面を閉じられます。
「編集を続ける」を選ぶとダイアログが閉じ、フォームの内容は変わりません。「下書きを保存」を選ぶとダイアログが閉じ、ステータス領域にスナップショットの内容がそのまま表示されます。メッセージでは、招待状は送信されていないことを明示します。この例には宛先リストも送信サービスもないため、メール送信に成功したかのようには表示しません。
関連する仕様を確認する
daisyUIデザインシステム：リセットと編集の動作を画面で確認 リセットと編集の動作を画面で確認 フィールドを変更するとカードがすぐに更新され、以前の保存通知は非表示になります。これにより、古い成功メッセージが、未保存の新しい招待状についての表示だと誤解されるのを防ぎます。リセット後は、ブラウザーがフォームの初期値に戻すのを待ってから、その実際の値を使ってプレビューを再構築します。個別に選択したテーマはそのまま維持されます。
3つの図形で構成される装飾的なアートワークにはprimary-contentの塗りを使うため、タイポグラフィと同様にテーマの変更が反映されます。参加人数や形式についての情報は追加しないため、aria-hiddenを指定しています。意味のある内容は、表示されるプレビューのタイトルとフッターで伝えます。
入力内容が無効な場合は確認を開始せず、タイトル欄に問題があることを示します。 Escapeキーを押すと確認画面が閉じ、保存結果は生成されません。 保存後に編集すると、現在のテーマは維持したまま、古い保存結果がクリアされます。 関連する仕様を確認する
daisyUIデザインシステム：ソースを明示してビルドするCSS ソースを明示して検出する小規模なCSSビルド ここでは、Tailwind CLI、ローカルのinput.css、上記の3つのソースファイルを使う設定を示します。source(none)で広範囲の自動スキャンを無効にし、明示的なsourceディレクティブでコンポーネントとユーティリティクラスを含むHTMLを指定します。これにより、生成されるCSSが実際のマークアップに基づくようになります。
ビルド結果は元のレイアウト用スタイルシートと組み合わせます。インタラクションにはプレーンなJavaScriptを使用します。単独で表示するプレビューにはビルド結果がインラインで含まれるため、外部依存はありません。Vite、Astro、Reactの各プロジェクトでは、通常のTailwind連携を使えます。その場合も、有効なテーマの一覧を維持し、クラスを含むソースファイルが対象に含まれるようにしてください。
関連する仕様を確認する
daisyUIデザインシステムのコンポーネント例 意味に沿ったHTMLコンポーネントの組み合わせ fieldset、ラジオボタンのjoin、ネイティブのrange入力、チェックボックス、カード、ダイアログ。
html コードをコピー
<main class="workshop"><header class="page-heading"><div><p class="eyebrow">DAISYUI · SEMANTIC THEMES</p><h1>A small gathering,<br>a considered invitation.</h1><p class="muted">Compose a local workshop card and watch the theme roles follow.</p></div><label class="fieldset">Theme<select id="theme" class="select"><option value="emerald">Emerald</option><option value="lofi">Lo-fi</option><option value="night">Night</option></select></label></header><div class="workbench"><form id="invitation" class="card bg-base-100 border border-base-300"><div class="card-body"><h2 class="card-title">Workshop details</h2><fieldset class="fieldset"><legend class="fieldset-legend">Workshop title</legend><input id="title" class="input validator w-full" required minlength="5" maxlength="52" value="Making room for ideas" aria-describedby="title-help"><p id="title-help" class="validator-hint">Use 5–52 characters.</p></fieldset><fieldset class="fieldset"><legend class="fieldset-legend">Format</legend><div class="join"><input class="join-item btn" type="radio" name="format" value="Studio session" aria-label="Studio session" checked><input class="join-item btn" type="radio" name="format" value="Online circle" aria-label="Online circle"></div></fieldset><fieldset class="fieldset"><legend class="fieldset-legend">Seats <output id="seat-count" for="seats">12</output></legend><input id="seats" class="range range-primary w-full" type="range" min="4" max="24" step="2" value="12" aria-label="Number of seats"><div class="range-labels"><span>4 · intimate</span><span>24 · open room</span></div></fieldset><label class="extras"><input id="materials" class="checkbox checkbox-primary" type="checkbox" checked><span>Include a materials pack<small>Paper, pencils and a small printed prompt.</small></span></label><div class="card-actions"><button class="btn btn-primary" type="submit">Review invitation</button><button class="btn btn-ghost" type="reset">Reset</button></div></div></form><section class="specimen" aria-label="Invitation preview"><div class="invitation-card card bg-primary text-primary-content"><div class="card-body"><div class="card-top"><span class="badge badge-outline">OPEN STUDIO</span><span>LOCAL DRAFT</span></div><div class="shape-art" aria-hidden="true"><i></i><i></i><i></i></div><p class="preview-kicker">A WORKSHOP FOR CURIOUS PEOPLE</p><h2 id="preview-title">Making room for ideas</h2><p id="preview-format">Studio session</p><div class="invite-footer"><strong id="preview-seats">12 seats</strong><span id="preview-materials">Materials included</span></div></div></div><div class="role-strip" aria-label="Theme color roles"><span class="bg-primary text-primary-content">Primary</span><span class="bg-secondary text-secondary-content">Secondary</span><span class="bg-accent text-accent-content">Accent</span><span class="bg-neutral text-neutral-content">Neutral</span></div><p class="muted specimen-note">The same semantic classes use each theme’s background and matching content colors.</p></section></div><div id="result" class="alert alert-success" role="status" hidden></div><dialog id="review" class="modal" aria-labelledby="review-title"><div class="modal-box"><h2 id="review-title">Review your local invitation</h2><p id="review-copy"></p><p class="muted">This prepares a local draft. No invitations are sent.</p><div class="modal-action"><button id="back" class="btn">Keep editing</button><button id="approve" class="btn btn-primary">Save local draft</button></div></div></dialog></main>
コードリファレンス
primary背景には、必ずprimary-contentのテキストを組み合わせます。 range入力にはmin、max、stepを指定し、ネイティブ入力のまま使用します。 ダイアログは、見た目だけのopenクラスではなくshowModalで開きます。 ローカルの下書き動作 ライブプレビュー、固定された確認用スナップショット、テーマ選択、ネイティブ検証。
JavaScript コードをコピー
const q=s=>document.querySelector(s),form=q('#invitation'),dialog=q('#review');let snapshot;
function update(){const title=q('#title').value.trim(),seats=q('#seats').value,format=q('[name="format"]:checked').value,materials=q('#materials').checked;q('#preview-title').textContent=title||'Your workshop title';q('#seat-count').value=seats;q('#preview-seats').textContent=`${seats} seats`;q('#preview-format').textContent=format;q('#preview-materials').textContent=materials?'Materials included':'Bring your own materials';q('#result').hidden=true;}
q('#theme').addEventListener('change',e=>document.documentElement.dataset.theme=e.target.value);form.addEventListener('input',update);form.addEventListener('reset',()=>setTimeout(update,0));form.addEventListener('submit',e=>{e.preventDefault();snapshot={title:q('#title').value.trim(),seats:q('#seats').value,format:q('[name="format"]:checked').value,materials:q('#materials').checked};if(snapshot.title.length<5){q('#title').setCustomValidity('Enter at least five non-space characters.');q('#title').reportValidity();return;}q('#review-copy').textContent=`${snapshot.title} · ${snapshot.format} · ${snapshot.seats} seats · ${snapshot.materials?'Materials included':'Bring your own materials'}`;dialog.showModal();});q('#title').addEventListener('input',()=>q('#title').setCustomValidity(''));q('#back').onclick=()=>dialog.close();q('#approve').onclick=()=>{dialog.close();q('#result').hidden=false;q('#result').textContent=`Local draft saved: ${snapshot.title}, ${snapshot.seats} seats. No invitations were sent.`;};update();
コードリファレンス
daisyUI JavaScriptのランタイムはインポートしません。 ユーザーの入力文字列はすべてtextContentで設定します。 保存時に作成されるのは、メモリ上のローカルな結果だけです。 元のレイアウト用スタイルシート ネイティブのCSSコンポーネントを囲む、レスポンシブな配置と装飾的な図形。
CSS コードをコピー
body{margin:0;background:var(--color-base-200);color:var(--color-base-content);font-family:ui-sans-serif,system-ui,sans-serif}.workshop{max-width:1100px;margin:auto;padding:32px}.page-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:32px}.eyebrow,.preview-kicker{font-size:11px;font-weight:700;letter-spacing:.12em}h1{font-size:36px;line-height:1.1;margin:14px 0}h2{font-size:20px;font-weight:650}.muted{opacity:.7;font-size:14px;line-height:1.6}.workbench{display:grid;grid-template-columns:1fr 1fr;gap:28px}.fieldset{margin:8px 0;min-width:0}.card-body{gap:12px}.fieldset-legend{gap:8px}.range-labels{display:flex;justify-content:space-between;font-size:11px;opacity:.7}.extras{display:flex;gap:12px;font-size:14px;margin:16px 0}.extras small{display:block;opacity:.65;margin-top:4px}.card-actions{margin-top:12px}.card-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.1em}.shape-art{height:135px;position:relative;display:flex;justify-content:center;align-items:center;margin:16px 0}.shape-art i{width:95px;height:95px;background:var(--color-primary-content);opacity:.8;border-radius:50%;margin-right:-20px}.shape-art i:nth-child(2){border-radius:0;transform:rotate(45deg);opacity:.3}.shape-art i:nth-child(3){border-radius:50% 50% 0 0;opacity:.55}.invitation-card h2{font-size:34px;line-height:1.15;margin:4px 0;overflow-wrap:anywhere}.invite-footer{display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:1px solid currentColor;padding-top:20px;margin-top:20px;font-size:12px}.role-strip{display:flex;gap:8px;margin-top:16px}.role-strip span{padding:8px;font-size:10px;border-radius:4px;flex:1;text-align:center}.specimen-note{margin-top:12px}.alert{margin-top:24px}.alert[hidden]{display:none}.modal-box p{margin:16px 0}.join{display:flex}.join .btn{flex:1;font-size:12px;padding-inline:12px}@media(max-width:700px){.workshop{padding:24px 16px}.page-heading{flex-direction:column;gap:8px}.page-heading .fieldset{width:100%}h1{font-size:30px}.workbench{grid-template-columns:1fr}.card-body{padding:20px}.invitation-card h2{font-size:30px}}
コードリファレンス
ページのレイアウトと見出しのサイズは、アプリケーション側で決めます。 index.htmlの全体 上記のスタイルシートのビルド結果と、インタラクションのソース一式を合わせて使用します。
html コードをコピー
<!doctype html>
<html lang="en" data-theme="emerald"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>daisyUI specimen</title><link rel="stylesheet" href="output.css"><link rel="stylesheet" href="style.css"></head><body>
<main class="workshop"><header class="page-heading"><div><p class="eyebrow">DAISYUI · SEMANTIC THEMES</p><h1>A small gathering,<br>a considered invitation.</h1><p class="muted">Compose a local workshop card and watch the theme roles follow.</p></div><label class="fieldset">Theme<select id="theme" class="select"><option value="emerald">Emerald</option><option value="lofi">Lo-fi</option><option value="night">Night</option></select></label></header><div class="workbench"><form id="invitation" class="card bg-base-100 border border-base-300"><div class="card-body"><h2 class="card-title">Workshop details</h2><fieldset class="fieldset"><legend class="fieldset-legend">Workshop title</legend><input id="title" class="input validator w-full" required minlength="5" maxlength="52" value="Making room for ideas" aria-describedby="title-help"><p id="title-help" class="validator-hint">Use 5–52 characters.</p></fieldset><fieldset class="fieldset"><legend class="fieldset-legend">Format</legend><div class="join"><input class="join-item btn" type="radio" name="format" value="Studio session" aria-label="Studio session" checked><input class="join-item btn" type="radio" name="format" value="Online circle" aria-label="Online circle"></div></fieldset><fieldset class="fieldset"><legend class="fieldset-legend">Seats <output id="seat-count" for="seats">12</output></legend><input id="seats" class="range range-primary w-full" type="range" min="4" max="24" step="2" value="12" aria-label="Number of seats"><div class="range-labels"><span>4 · intimate</span><span>24 · open room</span></div></fieldset><label class="extras"><input id="materials" class="checkbox checkbox-primary" type="checkbox" checked><span>Include a materials pack<small>Paper, pencils and a small printed prompt.</small></span></label><div class="card-actions"><button class="btn btn-primary" type="submit">Review invitation</button><button class="btn btn-ghost" type="reset">Reset</button></div></div></form><section class="specimen" aria-label="Invitation preview"><div class="invitation-card card bg-primary text-primary-content"><div class="card-body"><div class="card-top"><span class="badge badge-outline">OPEN STUDIO</span><span>LOCAL DRAFT</span></div><div class="shape-art" aria-hidden="true"><i></i><i></i><i></i></div><p class="preview-kicker">A WORKSHOP FOR CURIOUS PEOPLE</p><h2 id="preview-title">Making room for ideas</h2><p id="preview-format">Studio session</p><div class="invite-footer"><strong id="preview-seats">12 seats</strong><span id="preview-materials">Materials included</span></div></div></div><div class="role-strip" aria-label="Theme color roles"><span class="bg-primary text-primary-content">Primary</span><span class="bg-secondary text-secondary-content">Secondary</span><span class="bg-accent text-accent-content">Accent</span><span class="bg-neutral text-neutral-content">Neutral</span></div><p class="muted specimen-note">The same semantic classes use each theme’s background and matching content colors.</p></section></div><div id="result" class="alert alert-success" role="status" hidden></div><dialog id="review" class="modal" aria-labelledby="review-title"><div class="modal-box"><h2 id="review-title">Review your local invitation</h2><p id="review-copy"></p><p class="muted">This prepares a local draft. No invitations are sent.</p><div class="modal-action"><button id="back" class="btn">Keep editing</button><button id="approve" class="btn btn-primary">Save local draft</button></div></div></dialog></main>
<script src="app.js" defer></script></body></html> コードリファレンス
上記のインタラクションをapp.jsとして保存します。 ビューポートとネイティブのアセット読み込みを含みます。 04
daisyUIデザインシステムのエージェント設定 実装の出発点 daisyUI 5.7.47 および Tailwind CSS 4.3.3 で検証済み。カードのアートワークとページレイアウトは独自のものです。コンポーネント CSS と Emerald テーマの値はネイティブです。
CSS サンプルをコピー
/* npm install -D [email protected] @tailwindcss/[email protected] [email protected] */
/* Save the HTML example as body.html in the same directory as input.css. */
/* input.css */
@import "tailwindcss" source(none);
@source "./body.html";
@plugin "daisyui" {
themes: emerald --default, lofi, night;
}
/* Build: npx @tailwindcss/cli -i ./input.css -o ./output.css --minify */
/* In index.html, link output.css then style.css; include body.html markup. */
/* Load the supplied app.js with <script src="app.js" defer></script>. */
/* Set <html lang="en" data-theme="emerald"> and a viewport meta tag. */ あなたのプロジェクト向けプロンプト AI エージェント用プロンプト プロンプトをコピー
付属の Tailwind 4 ビルドと Emerald、Lo-fi、Night テーマを使用して daisyUI 5.7.47 を設定し、招待状スタジオを再現します。意味的な背景色と、それに対応するコンテンツの役割を組み合わせます。連結されたネイティブのラジオ入力、偶数刻みの座席数スライダー、資料用チェックボックス、タイトルの検証を維持してください。「プレビュー」では、現在の招待状をネイティブダイアログで表示します。「ローカル下書きを保存」すると、その時点の内容が確定され、後から編集するとメッセージが消去されます。選択中のテーマとは独立してフォームをリセットしてください。また、招待状が送信されたと誤解させる表現は避けてください。 05
daisyUI デザインシステムの参照元と適用範囲 daisyUI 5.7.47 および Tailwind CSS 4.3.3。Emerald の値はテーマ固有です。ローカル下書きはデータを保存せず、招待状も送信しません。
