# daisyUI 设计系统

## daisyUI 设计系统界面预览

切换 Emerald、Lo-fi 和 Night 主题，修改工作坊卡片并查看本地草稿。

## daisyUI 设计系统设计参考

daisyUI 5.7.47，使用 Tailwind CSS 4.3.3 构建。所列颜色和几何数值属于捆绑的 Emerald 主题；Lo-fi 和 Night 有意采用不同的数值。页面排版和间距是原始设计选择，使用兼容 Tailwind 的尺寸。

### Emerald 语义颜色

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --color-base-100 | oklch(100% 0 0) | 主要组件表面。 |
| --color-base-200 | oklch(93% 0 0) | 此示例中的页面表面。 |
| --color-base-300 | oklch(86% 0 0) | 表面边界。 |
| --color-base-content | oklch(35.519% 0.032 262.988) | 基础表面上的文本。 |
| --color-primary | oklch(76.662% 0.135 153.45) | 主要操作与邀请函背景。 |
| --color-primary-content | oklch(33.387% 0.04 162.24) | 与主色配套的文字颜色。 |
| --color-secondary | oklch(61.302% 0.202 261.294) | 次要角色。 |
| --color-secondary-content | oklch(100% 0 0) | 与次要色搭配的文本。 |
| --color-accent | oklch(72.772% 0.149 33.2) | 强调色角色。 |
| --color-accent-content | oklch(0% 0 0) | 与强调色搭配的文本。 |
| --color-neutral | oklch(35.519% 0.032 262.988) | 中性色强调。 |
| --color-neutral-content | oklch(98.462% 0.001 247.838) | 与中性色搭配的文本。 |
| --color-info | oklch(72.06% 0.191 231.6) | 信息角色。 |
| --color-success | oklch(64.8% 0.15 160) | 成功角色。 |
| --color-warning | oklch(84.71% 0.199 83.87) | 警告角色。 |
| --color-error | oklch(71.76% 0.221 22.18) | 错误角色。 |
### Emerald 组件几何属性

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --radius-selector | 1rem | 复选框、开关及类似选择器的圆角。 |
| --radius-field | 0.5rem | 输入框/按钮类字段的圆角。 |
| --radius-box | 1rem | 卡片/模态框的圆角。 |
| --size-selector | 0.25rem | 组件计算使用的选择器基础尺寸。 |
| --size-field | 0.25rem | 组件计算使用的字段基础尺寸。 |
| --border | 1px | 组件边框宽度。 |
| --depth | 0 | Emerald 不启用深度效果。 |
| --noise | 0 | Emerald 不启用噪点效果。 |
### 原始邀请函布局比例

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Page spacing | 32px desktop / 24px 16px mobile | 原始组合布局，并非独立的 daisyUI 间距令牌系统。 |
| Main heading | 36px / 1.1; 30px below 700px | 原始层级，高于组件默认值。 |
| Invitation title | 34px / 1.15; 30px on mobile | 原始大字号排版，并支持长词换行。 |
| Supporting copy | 14px / 1.6 | 原始易读说明文案。 |
| Layout breakpoint | 700px | 原始的分栏转堆叠断点，并非 daisyUI 断点令牌。 |
## daisyUI 设计系统完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

完整指导、实现起点和源代码链接。

## 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 元素上。本独立示例特意将它应用于整个文档。

1. 在 daisyUI 插件配置块中编译计划提供的主题。

2. 在组件标记中使用语义化的背景和内容类。

3. 更改 data-theme，并同时检查控件、界面表面和文字。

阅读配套规范

## daisyUI 设计系统：选择器、字段和容器的圆角各不相同

### 选择器、字段与盒子的圆角各自独立

Emerald 将 radius-selector 定义为 1rem，将 radius-field 定义为 0.5rem，将 radius-box 定义为 1rem。其 size-selector 和 size-field 是以 0.25rem 为单位的基础值，供组件计算使用。这些值不能与页面区块之间的间距互换。规格将组件几何尺寸与原始工作台布局分开。

页面外围采用系统无衬线字体栈、大号编辑风格标题和双栏布局。daisyUI 并不要求采用这种标题层级。在原有的 700px 断点处，页面会将编辑器置于邀请函上方；为适应截图，它会保留所有输入项和操作，而不是将其隐藏。

阅读配套规范

## daisyUI 设计系统：使用真正的单选输入构建选项组

### 使用 Join 组合真实的单选输入框

格式选项使用共享 name 的单选输入，并应用 join-item 和 btn 类。选择 Studio session 或 Online circle 时，原生选中状态和预览文案都会随之变化。相比之下，一排带样式却没有持久选中状态的按钮，无法如此清晰地表达互斥选择。

Seats 使用原生范围输入，取值范围为 4 到 24，步长为 2。output 元素会同步显示当前数值，两端的标签则说明适合的聚会规模。materials 控件是真正的复选框。它的状态会改变邀请函页脚，而不只是切换复选框的颜色。

阅读配套规范

## 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 组件组合

字段集、单选按钮选项组、原生范围输入、复选框、卡片和对话框。

```
<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 类。

### 本地草稿行为

实时预览、稳定的审核快照、主题选择和原生验证。

```
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 组件构建的响应式布局和装饰性几何图形。

```
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 文档

与上文提供的样式表构建产物和完整交互源码配合使用。

```
<!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 设计系统 Agent 配置

### 实现起点

已使用 daisyUI 5.7.47 和 Tailwind CSS 4.3.3 验证。卡片插画和页面布局均为原创；组件 CSS 和 Emerald 主题值为原生内容。

```
/* npm install -D tailwindcss@4.3.3 @tailwindcss/cli@4.3.3 daisyui@5.7.47 */
/* 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. */
```

### 适用于你项目的提示词

```
使用 daisyUI 5.7.47，搭配提供的 Tailwind 4 构建版本以及 Emerald、Lo-fi 和 Night 主题，复现邀请函工作室。将语义化界面表面颜色与其内容角色配对。保留组合式原生单选输入、按偶数步进的席位范围控件、材料复选框和标题验证。点击“预览”会在原生对话框中显示当前邀请函；“保存本地草稿”会确认该快照，之后继续编辑则会清除提示信息。重置表单时保留所选主题；不要声称邀请函已发送。
```

## daisyUI 设计系统来源与适用范围

daisyUI 5.7.47 和 Tailwind CSS 4.3.3。Emerald 值因主题而异。本地草稿不会持久保存数据，也不会发送邀请函。

- 安装 CSS 插件配置。

- 主题 主题配置和语义变量。

- 颜色 背景与内容角色配对。

- 范围控件 原生范围控件类。

- 验证器 浏览器有效性样式。

- 模态框 原生对话框组合。

- 布局与字体 应用布局和排版边界。

## daisyUI 设计系统相关资源

### Element Plus

使用 Element Plus 的真实 Transfer 模型、筛选器和禁用选项，构建模块选择工作台，并以经过验证的颜色、字号和控件尺寸为依据。

### Flowbite

原生 Flowbite 4 手风琴与抽屉组合，语义主题别名已验证；包含持久化打包清单和便于无障碍访问的本地材料备注流程。

### Fomantic UI

原生 Fomantic UI 阅读书架，包含经过验证的编译主题值、jQuery 下拉菜单和评分模块、明确的键盘支持，以及持久化的本地收藏列表。


- [实现参考](https://daisyui.com/docs/themes/)
- [来源](https://daisyui.com/docs/themes/)
- [来源](https://daisyui.com/docs/layout-and-typography/)
- [阅读配套规范](https://daisyui.com/docs/install/)
- [阅读配套规范](https://daisyui.com/docs/colors/)
- [阅读配套规范](https://daisyui.com/docs/themes/)
- [阅读配套规范](https://daisyui.com/docs/layout-and-typography/)
- [阅读配套规范](https://daisyui.com/components/join/)
- [阅读配套规范](https://daisyui.com/components/validator/)
- [阅读配套规范](https://daisyui.com/components/modal/)
- [阅读配套规范](https://daisyui.com/components/card/)
- [代码参考](https://daisyui.com/components/fieldset/)
- [代码参考](https://daisyui.com/components/modal/)
- [代码参考](https://daisyui.com/docs/layout-and-typography/)
- [代码参考](https://daisyui.com/)
- [安装 CSS 插件配置。](https://daisyui.com/docs/install/)
- [主题 主题配置和语义变量。](https://daisyui.com/docs/themes/)
- [颜色 背景与内容角色配对。](https://daisyui.com/docs/colors/)
- [范围控件 原生范围控件类。](https://daisyui.com/components/range/)
- [验证器 浏览器有效性样式。](https://daisyui.com/components/validator/)
- [模态框 原生对话框组合。](https://daisyui.com/components/modal/)
- [布局与字体 应用布局和排版边界。](https://daisyui.com/docs/layout-and-typography/)