🎉 daisyUI 5.0 升级指南

daisyUI 5 升级指南

本指南帮助您了解如何将项目更新到 Tailwind CSS 4 和 daisyUI 5。

在升级项目之前，请阅读关于
1 -Tailwind CSS 4 破坏性更改
2 -daisyUI 5 发行说明
3 -daisyUI 5 破坏性更改

1. 更新 Tailwind CSS

Tailwind CSS 提供了一个 CLI 工具用于自动升级。它可以自动将新的 Tailwind CSS 更改应用到您的项目。

  1. 首先，从您的tailwind.config.js文件中移除 daisyUI 和插件，以便 Tailwind CSS 升级工具可以安全地将其替换为 CSS 文件。
tailwind.config.js
module.exports = {
   content: ['./your-files/**/*.{html,js}'],
   // other stuff...
-  daisyui: {
-    themes: ['light', 'dark', 'cupcake'],
-  },
- plugins: [require("daisyui")],
}
  1. 运行官方 Tailwind CSS 升级工具:
终端
npx @tailwindcss/upgrade

2. 更新 daisyUI

  1. 安装 daisyUI 5
终端
npm i -D daisyui@latest
  1. 将 daisyUI 添加到您的 CSS 文件
app.css
@import "tailwindcss";
@plugin "daisyui";

或者如果您想要启用内置主题在配置:

app.css
@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}

现在一切应该按预期工作。如果您遇到任何挑战，可以在daisyUI Discord 服务器上寻求帮助，以便从社区获得帮助。

版本 4 的更改

这些是从 daisyUI 4 到 5 的所有 HTML 更改。总共有约 15 个更改，但您无需全部进行，只需进行您正在使用的那些。

画板

  • 移除了所有artboard和phone-*类。这些类只是简单地设置 div 的宽度和高度。请改用 Tailwind CSSw-*和h-*类。
之前之后
artboard phone-1w-[320px] h-[568px]
artboard phone-2w-[375px] h-[667px]
artboard phone-3w-[414px] h-[736px]
artboard phone-4w-[375px] h-[812px]
artboard phone-5w-[414px] h-[896px]
artboard phone-6w-[320px] h-[1024px]
artboard artboard-horizontal phone-1w-[568px] h-[320px]
artboard artboard-horizontal phone-2w-[667px] h-[375px]
artboard artboard-horizontal phone-3w-[736px] h-[414px]
artboard artboard-horizontal phone-4w-[812px] h-[375px]
artboard artboard-horizontal phone-5w-[896px] h-[414px]
artboard artboard-horizontal phone-6w-[1024px] h-[320px]

示例

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

头像

  • 重命名了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>

底部导航

  • 移除了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代替。
  • 移除了disabled类的bottom-nav。请改用aria-disabled="true"属性或disabled如果是按钮则使用 attribute 属性。这是为了更好的可访问性。
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>

卡片

  • card-bordered已重命名为card-border.
page.html
- <div class="card card-bordered">
+ <div class="card card-border">
  • 移除了card-compact。请改用card-sm代替。
page.html
- <div class="card card-compact">
+ <div class="card card-sm">

文件输入

  • 文件输入现在默认带有边框。如果您想移除边框，请使用file-input-ghost。
  • 移除了file-input-bordered。文件输入现在默认带有边框。使用file-input-ghost。
page.html
- <input type="file" class="file-input file-input-bordered">
+ <input type="file" class="file-input">
  • 页脚现在默认是垂直的。使用footer-horizontal使其在您想要的屏幕尺寸上水平显示。
page.html
- <footer class="footer">
+ <footer class="footer md:footer-horizontal">

输入框

  • 输入框现在默认宽度为 20rem，无需添加w-full max-w-xs.
  • 移除了input-border。输入框现在默认带有边框。使用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"/>

标签

  • 标签已重构，以更好地兼容表单元素。请参阅标签文档以获取更多信息。

遮罩

  • 移除了mask-parallelogram,mask-parallelogram-2,mask-parallelogram-3，以及mask-parallelogram-4。这些遮罩样式不再包含在库中。如果您需要它们，请手动使用 CSS
  • 垂直菜单不再是w-full。如果您希望它是全宽，请使用w-fullw-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-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>

选择框

  • 选择框现在默认宽度为 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">

堆叠

  • 与其设置堆叠项的宽度和高度，不如为堆叠本身设置宽度和高度。
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。

选项卡

  • 重命名了tabs-lifted为tabs-lift.
page.html
- <div class="tabs tabs-lifted">
+ <div class="tabs tabs-lift">

表格

  • 移除了hover类。请改用hover:bg-base-300（或任何其他颜色）。
page.html
- <tr class="hover">
+ <tr class="hover:bg-base-300">

文本域

  • 移除了textarea-border。文本域现在默认带有边框。使用textarea-ghost。

其他移除项

  • 移除 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>
您发现错误了吗？ 在 GitHub 上打开 issue
您喜欢 daisyUI 吗？ 发帖宣传一下！
支持 daisyUI 的开发： Open Collective
daisyUI store

NEXUS
官方 daisyUI 仪表板模板

在 daisyUI 商店中可用

更多细节
请升级您的浏览器