01 daisyUI 设计系统界面预览 切换 Emerald、Lo-fi 和 Night 主题，修改工作坊卡片并查看本地草稿。
使用 Tailwind CSS 4.3.3 编译的官方 daisyUI 5.7.47 类；应用行为由原生 JavaScript 实现。·
实现参考 daisyUI 5.7.47，使用 Tailwind CSS 4.3.3 构建。所列颜色和几何数值属于捆绑的 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)与次要色搭配的文本。 --color-accentoklch(72.772% 0.149 33.2)强调色角色。 --color-accent-contentoklch(0% 0 0)与强调色搭配的文本。 --color-neutraloklch(35.519% 0.032 262.988)中性色强调。 --color-neutral-contentoklch(98.462% 0.001 247.838)与中性色搭配的文本。 --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原始的分栏转堆叠断点，并非 daisyUI 断点令牌。
03 daisyUI 设计系统完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。
DESIGN-daisyui.md 完整指导、实现起点和源代码链接。
下载指南 Tailwind CSS 上的 daisyUI 设计系统语义组件类 Tailwind CSS 上的语义化组件类 daisyUI 通过 Tailwind 插件提供组件类。第五版的配置位于 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 值，不会将其转换成臆测的十六进制品牌色。
阅读配套规范
daisyUI 设计系统：编译计划提供的主题 编译你计划提供的主题 CSS 插件配置将 Emerald 设为默认主题，并启用 Lo-fi 和 Night。选择控件会更改文档元素上的 data-theme。菜单中只提供已编译的主题；选择一个从未构建过的主题名称，并不会凭空生成相应的 CSS。
主题还包含圆角、控件尺寸、边框和效果变量。因此，从 Emerald 切换到 Lo-fi，改变的不只是色样。若要将主题限定在嵌入区域内，可以将 data-theme 放在该区域上，而不是 html 元素上。本独立示例特意将它应用于整个文档。
在 daisyUI 插件配置块中编译计划提供的主题。 在组件标记中使用语义化的背景和内容类。 更改 data-theme，并同时检查控件、界面表面和文字。 阅读配套规范
daisyUI 设计系统：选择器、字段和容器的圆角各不相同 选择器、字段与盒子的圆角各自独立 Emerald 将 radius-selector 定义为 1rem，将 radius-field 定义为 0.5rem，将 radius-box 定义为 1rem。其 size-selector 和 size-field 是以 0.25rem 为单位的基础值，供组件计算使用。这些值不能与页面区块之间的间距互换。规格将组件几何尺寸与原始工作台布局分开。
页面外围采用系统无衬线字体栈、大号编辑风格标题和双栏布局。daisyUI 并不要求采用这种标题层级。在原有的 700px 断点处，页面会将编辑器置于邀请函上方；为适应截图，它会保留所有输入项和操作，而不是将其隐藏。
阅读配套规范
daisyUI 设计系统：CSS 验证遵循浏览器约束 CSS 验证遵循浏览器约束 标题输入框为必填，并设有最小和最大长度限制。validator 类和 validator-hint 用于呈现无效状态；原生约束仍由浏览器负责执行。表单不会通过在审核按钮上绑定通用点击处理器来绕过有效性检查。
通过常规验证后，提交处理器会去除标题首尾空格，并检查其有效长度。这样可以拦截仅由空格组成、却能满足未去除空格时的 minlength 要求的字符串。用户输入时会清除自定义有效性提示，以便修正后的标题可以提交。用户内容通过 textContent 渲染，绝不作为 HTML 插入。
阅读配套规范
daisyUI 设计系统：使用真正的对话框保存审核快照 使用真正的对话框保存审核快照 点击 Review invitation 会将当前标题、格式、人数和物料复制到快照中，然后调用 dialog.showModal。modal 类提供 daisyUI 样式，原生对话框行为则由浏览器提供。标题通过 aria-labelledby 为对话框命名，按 Escape 键可关闭审核窗口，且不会保存。
点击 Keep editing 会关闭对话框，表单内容保持不变。点击 Save local draft 会关闭对话框，并在状态区域中显示确切的快照内容。提示信息会说明邀请函尚未发送。这并非模拟邮件发送成功：示例没有收件人列表或发送服务。
阅读配套规范
daisyUI 设计系统：重置和编辑都会产生可见效果 重置和编辑都会产生可见效果 更改字段会立即更新卡片，并隐藏先前的已保存提示。这样可以避免过时的成功提示看起来像是在描述一份更新后却尚未保存的邀请函。重置操作会等浏览器恢复表单默认值后，再根据这些实际值重建预览。独立选定的主题会保持不变。
由三个形状组成的装饰图案使用 primary-content 作为填充色，因此会与文字排版一起响应主题变化。它标记为 aria-hidden，因为它不会提供与人数或格式有关的信息。预览中可见的标题和页脚才承载有意义的内容。
输入无效时会阻止审核，并标出标题字段。 按 Escape 键可关闭审核，不会生成已保存结果。 保存后继续编辑会清除旧结果，同时保留当前主题。 阅读配套规范
daisyUI 设计系统：使用明确的源码发现配置进行小型 CSS 构建 精简的 CSS 构建，并明确指定源码发现范围 给定的配置使用 Tailwind CLI、本地 input.css 和上方所示的三个源文件。source(none) 会禁用大范围的自动扫描，而显式的 source 指令则指向包含组件和实用类的 HTML。这样一来，示例生成的 CSS 便取决于实际标记内容。
构建输出会与原始布局样式表合并；交互由纯 JavaScript 负责。独立预览会将结果内联，不依赖远程资源。Vite、Astro 或 React 项目也可以使用其常规 Tailwind 集成，但应保留已启用主题列表，并确保包含带有类名的源文件。
阅读配套规范
daisyUI 设计系统组件示例 语义化的 HTML 组件组合 字段集、单选按钮选项组、原生范围输入、复选框、卡片和对话框。
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 文字。 范围输入仍是带有 min、max 和 step 的原生输入控件。 通过 showModal 打开对话框，而非仅添加视觉上的 open 类。 本地草稿行为 实时预览、稳定的审核快照、主题选择和原生验证。
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。 包含视口设置和原生资源加载。 实现起点 已使用 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. */ 适用于你项目的提示词 Agent 提示词 复制提示词
使用 daisyUI 5.7.47，搭配提供的 Tailwind 4 构建版本以及 Emerald、Lo-fi 和 Night 主题，复现邀请函工作室。将语义化界面表面颜色与其内容角色配对。保留组合式原生单选输入、按偶数步进的席位范围控件、材料复选框和标题验证。点击“预览”会在原生对话框中显示当前邀请函；“保存本地草稿”会确认该快照，之后继续编辑则会清除提示信息。重置表单时保留所选主题；不要声称邀请函已发送。 daisyUI 5.7.47 和 Tailwind CSS 4.3.3。Emerald 值因主题而异。本地草稿不会持久保存数据，也不会发送邀请函。
