更新日志

此项目的所有重大更改都将记录在此文件中。请参阅 commit-and-tag-version 以获取提交指南。

5.0.9 (2025-03-21)

Bug 修复

修复 iOS 上的 join 样式。 closes: #3691 (5afa08c)

5.0.8 (2025-03-21)

Bug 修复

修复 alert 组件在只有一个子元素时出现不必要的间隙的问题。 closes: #3702 (6d3eb06)

5.0.7 (2025-03-21)

5.0.6 (2025-03-17)

Bug 修复

修复 badge 颜色 (56390f5)

5.0.5 (2025-03-17)

Bug 修复

修复：浮动标签字体大小。 closes: #3676
修复：. select > select caret。 closes: #3613
修复：主题生成器未修剪颜色问题。 closes: #3636
修复：btn-active 与 Tailwind 变体前缀一起工作。 closes: #3652
修复：badge-outline border-* 覆盖。 closes: #3657
修复：Swap Indeterminate 旋转样式。 closes: #3678
修复：hero-content 隔离问题。 closes: #3682
修复：轮廓和虚线的选中按钮样式。 closes: #3591
修复：fieldset-label 光标

5.0.4 (2025-03-14)

修复：防止在只有一个默认主题时添加重复主题 - 提高了单主题站点的 CSS 大小。
修复：<label> 中的 select 双 caret。 closes: #3613
修复：dialog 未将焦点放在第一个可聚焦元素上。 closes: #3440

5.0.3 (2025-03-12)

Bug 修复

修复：CDN 颜色不透明度实用程序
修复：dropdown-end 位置
修复：diff 轮廓
修复：diff-resizer 大小和位置
修复：选中按钮样式

5.0.2 (2025-03-11)

Bug 修复

tailwindplay 问题 (24cd382)

5.0.1 (2025-03-11)

Bug 修复

bug：（v5）我无法在不使用 important 的情况下覆盖按钮的内联 font-size。 closes: #3641
bug：alert 组件中的文本内容不响应。 closes: #3638
bug：prose（排版插件）中的代码没有被 daisy 样式化。 closes: #3631
bug：Modal 在构建后丢失了背景转换效果。 closes: #3628
bug：（v5）当使用 join 和单选按钮时出现意外的轮廓。 closes: #3615
bug：fieldset + select + icon。 closes: #3613
bug：（v5）文本不透明度和自定义字体在 daisyUI v5 CDN 版本中不起作用。 closes: #3612
bug："join" 在与单个项目一起使用时应用了不正确的边框半径。 closes: #3611
bug：（v5）按钮颜色与排版效果不佳。 closes: #3606
bug：（v5）Collapse 使用变量 --rounded-box 但它应该使用 --radius-box。 closes: #3600
bug：Deno 需要 import 上的 with 属性。 closes: #3597
bug：开发指南在 Windows 机器上不起作用。 closes: #3567
docs：Badge 组件代码高亮错误。 closes: #3627
docs：添加关于 Modal 组件放置在 Dropdown 组件内部的警告。 closes: #3616

5.0.0

这是每个组件更改的详细列表。大多数这些更改不会影响您的项目，因此如果您只想了解重大更改，请查看 daisyUI 5 发行说明

Alert

🆕 新增功能

添加了 alert-outline、alert-dash 和 alert-soft 变体。
添加了 alert-vertical 和 alert-horizontal 布局选项。

🔧 变更

您现在可以使用 max-sm:alert-horizontal 或任何其他响应式断点，而不是硬编码的响应式断点。

Artboard

🗑️ 移除

重大更改： 移除所有 artboard 和 phone-* 类。这些类只是设置 div 的宽度和高度。请改用 Tailwind CSS w-* 和 h-* 类。

之前	之后
`artboard phone-1`	`w-[320px] h-[568px]`
`artboard phone-2`	`w-[375px] h-[667px]`
`artboard phone-3`	`w-[414px] h-[736px]`
`artboard phone-4`	`w-[375px] h-[812px]`
`artboard phone-5`	`w-[414px] h-[896px]`
`artboard phone-6`	`w-[320px] h-[1024px]`

之前	之后
`artboard artboard-horizontal phone-1`	`w-[568px] h-[320px]`
`artboard artboard-horizontal phone-2`	`w-[667px] h-[375px]`
`artboard artboard-horizontal phone-3`	`w-[736px] h-[414px]`
`artboard artboard-horizontal phone-4`	`w-[812px] h-[375px]`
`artboard artboard-horizontal phone-5`	`w-[896px] h-[414px]`
`artboard artboard-horizontal phone-6`	`w-[1024px] h-[320px]`

page.html

- <div class="artboard phone-1">
+ <div class="w-[320px] h-[568px]">

需要明确的是，mockup-phone 未被移除。它只是不再需要 artboard 类。

Avatar

🔧 变更

重大更改： 将 online 类重命名为 avatar-online，offline 重命名为 avatar-offline，placeholder 重命名为 avatar-placeholder。

page.html

- <div class="avatar online">
+ <div class="avatar avatar-online">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>

page.html

- <div class="avatar offline">
+ <div class="avatar avatar-offline">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>

Badge

🆕 新增功能

添加了 badge-dash 和 badge-soft 样式。
添加了 badge-xl 尺寸。
在 badge 内容之间添加了默认的 gap-2，因此您不必手动添加它来在文本和图标之间放置空格。

🔧 变更

根据新的比例调整了尺寸。

Breadcrumbs

🆕 新增功能

为列表项内的元素添加了默认的 gap-2，因此您不必手动添加它来在文本和图标之间放置空格。

🗑️ 移除

重大更改： 移除 bottom-nav 组件。请改用 dock 组件。
重大更改： 移除 btm-nav-xs、btm-nav-sm、btm-nav-md、btm-nav-lg。请改用 dock-xs、dock-sm、dock-md、dock-lg。
重大更改： 移除 btm-nav-active。请改用 dock-active。
重大更改： 移除 bottom-nav 的 disabled 类。如果是按钮，请使用 aria-disabled="true" 属性或 disabled 属性。这是为了更好的可访问性。

page.html

- <div class="btm-nav btm-nav-sm">
+ <div class="dock dock-sm">
  <button>🏠</button>
-   <button class="active">🍿</button>
+   <button class="dock-active">🍿</button>
  <button>⚙️</button>
</div>

Button

🆕 新增功能

添加了 btn-xl 尺寸。
添加了 btn-dash 和 btn-soft 样式。
如果启用了 --depth 效果，则添加了 box-shadow。

🔧 变更

重新设计了点击动画，现在更加微妙，并且更适合任何尺寸的按钮。
调整了尺寸比例。
调整了字体大小。
调整了内边距。
改进了禁用状态样式。
重大更改： 默认高度降低；可通过 --size-field 自定义。
选中按钮（复选框、单选按钮）现在具有轮廓而不是强制的主色。这允许像 checked:btn-secondary 这样的自定义
btn-ghost hover 样式已更改。在 v4 中，btn-ghost 具有特定的 hover 样式，会覆盖任何颜色修改。例如，在 btn btn-ghost btn-primary 中，按钮看起来不是 primary 色。在 v5 中，btn-ghost 现在只在 hover 之前看起来像 ghost。它在 hover 时显示原始颜色。

Card

🆕 新增功能

添加了 card-border 和 card-dash 样式，它们从主题中调整边框宽度。
添加了对不同卡片尺寸的支持 (card-xs、card-sm、card-md、card-lg、card-xl)。
允许使用 <label class="card"> 作为单选卡。如果复选框或单选按钮直接位于卡片内，则单击卡片将切换复选框/单选按钮，并在卡片周围显示轮廓。

🔧 变更

重大更改： card-bordered 重命名为 card-border。
调整了卡片主体中的内边距。
调整了字体大小。

page.html

- <div class="card card-bordered">
+ <div class="card card-border">

🗑️ 移除

移除了 card-compact。请改用 card-sm。

Chat

🆕 新增功能

添加了 chat-bubble-neutral 颜色。

🔧 变更

重大更改： 将聊天气泡默认颜色从 neutral 更改为 base-300。如果您想继续使用 neutral 色，请添加 chat-bubble-neutral。
改进了聊天气泡尾部形状，使其更美观。
调整了气泡大小以适应其他组件。
调整了标题/页脚的字体大小。

Checkbox

🆕 新增功能

添加了 checkbox-xl 尺寸。
添加了 checkbox-neutral 颜色。
Checkbox 现在对打印友好。

🔧 变更

默认样式已根据新的主题系统进行了重大更改。
改进了复选标记图标和动画。
改进了焦点样式，以获得更好的可访问性。
调整了尺寸比例以适应其他组件。
改进了强制颜色模式，以获得更好的可访问性。

Countdown

🆕 新增功能

改进了屏幕阅读器的可访问性。

Diff

🆕 新增功能

添加了使用键盘导航聚焦于每一侧的功能。
添加了在 iOS Safari 上点击以聚焦于每一侧的功能。

🔧 变更

图像现在按时间顺序排列。第一张图片是 diff-item-1，第二张图片是 diff-item-2。
修复了 Firefox 延迟问题。
更新了 HTML 语法以支持 iOS 和键盘导航。 tabindex="0" 允许使用键盘导航或在 CSS resize 属性不受支持的 iOS Safari 上点击来聚焦元素。

page.html

- <figure class="diff aspect-16/9">
+ <figure class="diff aspect-16/9" tabindex="0">
  <div class="diff-item-1" role="img">
    <img alt="image 1" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" />
  </div>
-  <div class="diff-item-2" role="img">
+  <div class="diff-item-2" role="img" tabindex="0">
    <img alt="image 2" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" />
  </div>
  <div class="diff-resizer"></div>
</figure>

🆕 新增功能

使用 CSS 焦点方法，再次单击下拉按钮现在将关闭下拉菜单 ✅
添加了对新的 HTML popover 属性的支持。 HTML popover 是在 HTML 中创建下拉菜单的新标准。它可以防止任何溢出边缘情况问题和任何 z-index 问题。
添加了对新的 CSS Anchor positioning 的支持（目前仅在基于 Chromium 的浏览器上有效。其他浏览器会将下拉菜单定位在屏幕中间，就像模态框一样）。

🔧 变更

现在使用 CSS @starting-style。
使用 display 而不是 visibility 来显示/隐藏下拉菜单，以防止溢出问题。

Divider

🆕 新增功能

Divider 现在对打印友好。

FileInput

🆕 新增功能

添加了 file-input-xl 尺寸。

🔧 变更

调整了尺寸比例以适应其他组件。
调整了内边距。
调整了字体大小。
重大更改： File input 现在默认带有边框。如果您想移除边框，请使用 file-input-ghost。

🗑️ 移除

重大更改： 移除 file-input-bordered。 File input 现在默认带有边框。如果您想移除边框，请使用 file-input-ghost。

page.html

- <input type="file" class="file-input file-input-bordered">
+ <input type="file" class="file-input">

🆕 新增功能

添加了对水平和垂直布局的支持 (footer-horizontal, footer-vertical)。

🔧 变更

重大更改： Footer 现在默认是垂直的。使用 footer-horizontal 使其在您想要的屏幕尺寸上水平显示。

page.html

- <footer class="footer">
+ <footer class="footer md:footer-horizontal">

Input

🆕 新增功能

添加新的 input-xl 尺寸。

🔧 变更

重大更改： Input 现在具有 20rem 的默认宽度，无需添加 w-full max-w-xs。
重大更改： 移除 input-border。Input 现在默认带有边框。如果您想移除边框，请使用 input-ghost。
调整了内边距。
调整了尺寸比例以适应其他组件。
改进了焦点样式。

🗑️ 移除

重大更改： 移除 input-bordered 类（不再需要）。

之前

<!-- Input with border -->
<input class="input input-bordered"/>

<!-- Input without border -->
<input class="input"/>

<!-- Input with 20rem width -->
<input class="input w-full max-w-xs"/>

之后

<!-- Input with border -->
<input class="input"/>

<!-- Input without border -->
<input class="input input-ghost"/>

<!-- Input with consistent width -->
<input class="input"/>

Join

🔧 变更

重构了结构，使其更兼容所有按钮和字段。

Kbd

🆕 新增功能

添加了新的 kbd-xl 尺寸。

Label

🔧 变更

重大更改： Label 已被重构，以更好地兼容表单元素。有关更多信息，请参阅 label 文档。

Loading

🔧 变更

添加了新的 loading-xl 尺寸。
使用 SVG 动画而不是 CSS 动画以获得更好的性能。
修复了 Safari 错误，该错误导致动画有时卡住。

Mask

🗑️ 移除

重大更改： 移除 mask-parallelogram、mask-parallelogram-2、mask-parallelogram-3 和 mask-parallelogram-4。这些 mask 样式不再包含在库中。如果您需要它们，请手动使用 CSS

🆕 新增功能

添加了新的 menu-xl 尺寸。

🔧 变更

改进了菜单项的 hover 效果。
调整了内边距、字体大小和高度以匹配其他组件。
更容易自定义菜单项的样式。
重大更改： 垂直菜单不再是 w-full。如果您希望它是全宽，请使用 w-full。
重大更改： 将菜单项的 disabled 类重命名为 menu-disabled。
重大更改： 将菜单项的 active 类重命名为 menu-active。
重大更改： 将菜单项的 focus 类重命名为 menu-focus。

page.html

- <ul class="menu">
+ <ul class="menu w-full">

-   <li class="disabled"><a>disabled item</a></li>
+   <li class="menu-disabled"><a>disabled item</a></li>

-   <li class="active"><a>active item</a></li>
+   <li class="menu-active"><a>active item</a></li>

-   <li class="focus"><a>focus item</a></li>
+   <li class="menu-focus"><a>focus item</a></li>
</ul>

Mockup

🔧 变更

重大更改： 将 mockup-phone 中的 camera 类重命名为 mockup-phone-camera。
重大更改： 将 mockup-phone 中的 display 类重命名为 mockup-phone-display。
重大更改： mockup-phone-display

page.html

<div class="mockup-phone">
-  <div class="camera"></div>
+  <div class="mockup-phone-camera"></div>

-    <div class="display">
+    <div class="mockup-phone-display">

-    <div class="artboard artboard-demo phone-1">Hi.</div>
+    <div class="w-[320px] h-[568px]">Hi.</div>
  </div>
</div>

🆕 新增功能

添加了新的 modal-start 和 modal-end 定位选项。

🔧 变更

现在使用 CSS @starting-style
使用 display 而不是 visibility 来显示/隐藏模态框。

Radial Progress

🆕 新增功能

在 --value 更改时添加了动画。
改进了屏幕阅读器的可访问性。

Radio

🆕 新增功能

添加了新的 radio-xl 尺寸。
Radio 现在对打印友好。

🔧 变更

改进了尺寸比例以适应其他组件。
改进了强制颜色模式，以获得更好的可访问性。

Range

🆕 新增功能

添加了新的 range-xl 尺寸。

🔧 变更

改进了 range 组件的视觉吸引力。
改进了尺寸比例以适应其他组件。
改进了强制颜色模式，以获得更好的可访问性。

Rating

🆕 新增功能

改进了屏幕阅读器的可访问性。

🔧 变更

修复了未选中的单选框看起来像已选中的问题。
改进了点击和聚焦动画

选择框

🆕 新增功能

添加了新的 select-xl 尺寸。

🔧 变更

重大变更： 选择框现在默认宽度为 20rem，无需添加 w-full max-w-xs。可以使用 max-w-none 类。
重大变更： 移除 select-border。选择框现在默认带有边框。如果想要移除边框，请使用 select-ghost。
调整了内边距、高度和字体大小，以与其他组件匹配。

之前

<!-- Select with border -->
<select class="select select-bordered">

<!-- Select without border -->
<select class="select">

<!-- Select with consistent width -->
<select class="select w-full max-w-xs">

之后

<!-- Select with border -->
<select class="select">

<!-- Select without border -->
<select class="select select-ghost">

<!-- Select with consistent width -->
<select class="select">

堆叠

🆕 新增功能

添加了对不同堆叠方向的支持：stack-bottom、stack-top、stack-start、stack-end。

🔧 变更

堆叠现在使用 CSS Grid 布局。
重大变更： 现在不再设置堆叠项的宽度和高度，而是为堆叠本身设置宽度和高度。

page.html

- <div class="stack">
-   <div class="card bg-base-100 w-36 h-36">Text</div>
-   <div class="card bg-base-100 w-36 h-36">Text</div>
-   <div class="card bg-base-100 w-36 h-36">Text</div>
+ <div class="stack w-36 h-32">
+   <div class="card bg-base-100">Text</div>
+   <div class="card bg-base-100">Text</div>
+   <div class="card bg-base-100">Text</div>
</div>

状态

🔧 变更

重大变更： stats 组件的背景颜色现在是透明的。如果需要背景颜色，请使用 bg-base-100。

步骤

🆕 新增功能

为步骤组件内部的自定义图标添加了新的 step-icon 类。
步骤组件现在支持打印。

标签页

🆕 新增功能

添加了新的 tab-xl 尺寸。
调整了内边距、字体大小和高度以匹配其他组件。
添加了从主题 CSS 变量自定义标签页高度的功能。请查看主题生成器页面，了解其工作原理。
添加了新的 tabs-top 和 tabs-bottom 定位选项。
改进了屏幕阅读器和强制颜色模式下的可访问性。

🔧 变更

将 tabs 和 tab-content 从 grid 布局更改并重构为 flex 布局，从而修复了 tab-content 末端不稳定的 margin 问题，这个问题是 v4 版本中使用无限 grid 列将标签页推到左侧同时保持内容全宽的副作用。 flex 和 flex order 使我们能够更好地控制这种布局。
重大变更： 将 tabs-lifted 重命名为 tabs-lift。

page.html

- <div class="tabs tabs-lifted">
+ <div class="tabs tabs-lift">

表格

🆕 新增功能

添加了新的 table-xl 尺寸。

🔧 变更

重大变更： 移除 hover 类。请使用 hover:bg-base-300（或任何其他颜色）代替。

page.html

- <tr class="hover">
+ <tr class="hover:bg-base-300">

文本框

🆕 新增功能

添加了新的 textarea-xl 尺寸。

🔧 变更

重大变更： 移除 textarea-border。文本框现在默认带有边框。如果想要移除边框，请使用 textarea-ghost。

时间线

🆕 新增功能

时间线组件现在支持打印。

开关

🆕 新增功能

添加了新的 toggle-xl 尺寸。
添加了 toggle-neutral 颜色。
允许为开关使用自定义图标。示例
开关组件现在支持打印。

🔧 变更

对开关滑块使用 CSS 伪元素，而不是 box shadow，这在视觉上更易访问。
改进了强制颜色模式，以获得更好的可访问性。

🆕 新增功能

添加了新的可选 tooltip-content 类，允许工具提示内部包含 HTML 内容。
为所有方向添加了平滑的过渡和动画效果。

🔧 变更

将工具提示尾部的形状更改为更美观的形状。

排版

🔧 变更

daisyUI 现在仅将颜色应用于 @tailwindcss/typography 插件，而不应用其他修改（如内边距）。您可以根据 @tailwindcss/typography 配置自定义这些设置。如果您想要 v4 版本的其他修改，这是 CSS 代码

其他移除

🗑️ 移除 form-control, label-text, label-text-alt

您仍然可以使用相同的 HTML 结构，但类名不再存在，并且不会应用颜色、字体大小、flex 等样式。
我建议您对 fieldset 和 legend 元素使用新添加的类名，以获得更好的可访问性。

之前

<label class="form-control w-full max-w-xs">
  Login
  <div class="label">
    <span class="label-text">Name</span>
  </div>
  <input class="input" placeholder="Name" />
</label>

之后

<fieldset class="fieldset">
  <legend>Login</legend>
  <label class="label" for="name">Name</label>
  <input id="name" class="input" placeholder="Name" />
</fieldset>

之前

<label class="form-control w-full max-w-xs">
  <div class="label">
    <span class="label-text">What is your name?</span>
    <span class="label-text-alt">Top Right label</span>
  </div>
  <input type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

之后

<fieldset class="fieldset max-w-xs">
  <label class="label flex justify-between" for="name">
    <span>What is your name?</span>
    <span>Top Right label</span>
  </label>
  <input id="name" class="input" placeholder="Name" />
  <label class="label flex justify-between" for="name">
    <span>Bottom Left label</span>
    <span>Bottom Right label</span>
  </label>
</fieldset>

🗑️ 移除 btn-group 和 input-group

btn-group、input-group 在一年前已被弃用，现在终于被移除。
如果您一直在使用 btn-group 或 input-group，则可以使用 join 代替

之前

<div class="btn-group">
  <button class="btn">Button 1</button>
  <button class="btn">Button 2</button>
</div>

之后

<div class="join">
  <button class="btn join-item">Button 1</button>
  <button class="btn join-item">Button 2</button>
</div>

更新日志

5.0.9 (2025-03-21)

Bug 修复

5.0.8 (2025-03-21)

Bug 修复

5.0.7 (2025-03-21)

5.0.6 (2025-03-17)

Bug 修复

5.0.5 (2025-03-17)

Bug 修复

5.0.4 (2025-03-14)

5.0.3 (2025-03-12)

Bug 修复

5.0.2 (2025-03-11)

Bug 修复

5.0.1 (2025-03-11)

Bug 修复

5.0.0

Alert

Artboard

Avatar

Badge

Breadcrumbs

Bottom Navigation

Button

Card

Chat

Checkbox

Countdown

Diff

Dropdown

Divider

FileInput

Footer

Input

Join

Kbd

Label

Loading

Mask

Menu

Mockup

Modal

Radial Progress

Radio

Range

Rating

选择框

堆叠

状态

步骤

标签页

表格

文本框

时间线

开关

工具提示

排版

其他移除

🗑️ 移除 form-control, label-text, label-text-alt

🗑️ 移除 btn-group 和 input-group