How to update daisyUI from version 3 to version 4

去年发布作者：Pouya Saadeghi

如何将 daisyUI 从版本 3 更新到版本 4

本升级指南帮助您轻松将 daisyUI 更新到版本 4，而不会破坏任何内容。

daisyUI 4 破坏性更改

自 2023 年 7 月发布 daisyUI 3 以来，我的重点一直放在突破界限和增强 daisyUI 体验上。 CSS 中的新功能为 daisyUI 开辟了新的可能性，现在随着 daisyUI 4 的发布，我们可以享受所有的新功能和改进。

这个最新版本标志着 daisyUI 在设计、功能、可访问性和效率方面向前迈出了一大步。有关改进的详细概述，请浏览daisyUI 更新日志页面. 但是，将现有项目升级到新的主要版本，最重要的是破坏性更改。在本指南中，我们将逐步介绍如何将 daisyUI 从版本 3 更新到版本 4。

1. 更新 daisyUI 包

首先，您需要将 daisyUI 包更新到最新版本。您可以通过在终端中运行以下命令来完成此操作

npm i -D daisyui@latest

2. daisyUI 颜色变量

daisyUI 4 使用新的 OKLCH 颜色系统在底层。这意味着所有颜色 CSS 变量（例如--p,--s等）现在具有 OKLCH 值而不是 HSL 值。 (阅读更多关于 OKLCH 的信息)

如果您将 daisyUI 颜色与 Tailwind CSS 类名一起使用（例如bg-primary），您无需执行任何操作。
如果您在项目中直接使用 CSS 变量（例如.myclass{ color: hsl(var(--p)) }），您现在需要将它们与 oklch 函数一起使用（例如.myclass{ color: oklch(var(--p)) }）。

这是 daisyUI 3 和 4 中亮色主题的主色

之前

之后

/* the values were HSL */
--p: 251.47 100% 56%;

/* the values are OKLCH */
--p: 0.4912 0.3096 275.75;

因此，为了在您的项目中直接使用 daisyUI 颜色 CSS 变量，请将颜色函数从hsl()更改为oklch()像这样

之前

之后

/* Using hsl() function */
color: hsl(var(--p));

/* Using oklch() function */
color: oklch(var(--p));

3. 所有 `-focus` 颜色均已移除 3. 所有 `-focus` 颜色均已移除

所有*-focus颜色，例如primary-focusdaisyUI 3 中的颜色所做的只是使用相同的bg-primary颜色和更深的阴影。现在，得益于新的color-mix()CSS 函数，我们动态地执行相同的操作，并且它使我们能够更好地控制颜色。例如，看看这个惊人的类名。它将原色与黑色混合，使其变暗 7%

bg-[color-mix(in_oklab,oklch(var(--p)),black_7%)]
                   │              │       │
                   │              │       │
                   │              │       │
                   │              │       ╰── black with 7% opacity = 7% darker
                   │              │
                   │              ╰── primary color
                   │
                   ╰── OKLAB gives a better result

因此，如果您使用了*-focus项目中的颜色，并且您想要完全相同的结果，则可以使用新的color-mix()函数在任意类名中，如下所示

之前

之后

class="bg-primary-focus"
class="bg-secondary-focus"
class="bg-accent-focus"
class="bg-neutral-focus"

class="bg-[color-mix(in_oklab,oklch(var(--p)),black_7%)]"
class="bg-[color-mix(in_oklab,oklch(var(--s)),black_7%)]"
class="bg-[color-mix(in_oklab,oklch(var(--a)),black_7%)]"
class="bg-[color-mix(in_oklab,oklch(var(--n)),black_7%)]"

4. 扩展主题

在以下文件中，属性名称发生了更改daisyui/src/theming/themes.js文件。如果您正在自定义内置的 daisyUI 主题，请更改它

之前

之后

daisyui: {
  themes: [
    {
      light: {
        ...require("daisyui/src/theming/themes")["[data-theme=light]"],
        primary: "blue",
      },
    },
  ],
},

daisyui: {
  themes: [
    {
      light: {
        ...require("daisyui/src/theming/themes")["light"],
        primary: "blue",
      },
    },
  ],
},

5. RTL

daisyUI 4 组件使用逻辑 CSS 属性而不是方向规则 (mr-*,pl-*等）。现在，所有组件都支持运行时 LTR/RTL，而无需任何配置或插件。你只需要<html dir=rtl>运行时一切都将是 RTL。您可以安全地删除rtl: true配置和tailwindcss-flip项目中的插件（如果您正在使用逻辑 Tailwind CSS 实用程序类，并且您自己的方向 Tailwind CSS 类不需要该插件）

之前

之后

module.exports = {
  //...
  plugins: [require("daisyui"), require("tailwindcss-flip")],
  daisyui: {
    rtl: true,
  },
}

module.exports = {
  //...
  plugins: [require("daisyui")],
  daisyui: {},
}

6. 标签页

这些修饰符类用于标签页已删除
- tab-lifted
- tab-bordered
- tab-lg
- tab-md
- tab-sm
- tab-xs
对父级使用以下修饰符类标签页类代替
- tabs-lifted
- tabs-bordered
- tabs-lg
- tabs-md
- tabs-sm
- tabs-xs

之前

之后

<div class="tabs">
  <a class="tab tab-lg tab-lifted">Tab 1</a>
  <a class="tab tab-lg tab-lifted tab-active">Tab 2</a>
  <a class="tab tab-lg tab-lifted">Tab 3</a>
  <a class="tab tab-lg tab-lifted">Tab 4</a>
</div>

<div class="tabs tabs-lg tabs-lifted">
  <a class="tab">Tab 1</a>
  <a class="tab tab-active">Tab 2</a>
  <a class="tab">Tab 3</a>
  <a class="tab">Tab 4</a>
</div>

7. 按钮

默认情况下，按钮不再大写。您可以添加uppercase类，如果您想将它们大写。

结论

就是这样！您现在可以享受新的 daisyUI 4功能和改进在您的项目中。如果您对升级有具体问题，请在以下位置提问这个 GitHub 讨论如果您发现错误，请在以下位置报告daisyUI GitHub 问题

我很高兴看到您将使用 daisyUI 4 构建的所有令人惊叹的东西。

标签指南

daisyUI 博客

如何将 daisyUI 从版本 3 更新到版本 4

daisyUI 4 破坏性更改

1. 更新 daisyUI 包

2. daisyUI 颜色变量

3. 所有 `-focus` 颜色均已移除 3. 所有 `-focus` 颜色均已移除

4. 扩展主题

5. RTL

6. 标签页

7. 按钮

结论

不要错过新帖子！

daisyUI 博客

如何将 daisyUI 从版本 3 更新到版本 4

daisyUI 4 破坏性更改

1. 更新 daisyUI 包

2. daisyUI 颜色变量

3. 所有 *-focus 颜色均已移除 3. 所有 *-focus 颜色均已移除

4. 扩展主题

5. RTL

6. 标签页

7. 按钮

结论

不要错过新帖子！

3. 所有 `-focus` 颜色均已移除 3. 所有 `-focus` 颜色均已移除