daisyUI 5 有什么值得期待的？

daisyUI 5 即将到来的变化和功能的概述

daisyUI 5 正在开发中，将在 Tailwind CSS 4 发布后发布。以下是你对 daisyUI 5 的期望以及它与当前版本的不同之处。

与 Tailwind CSS 4 的兼容性

Tailwind CSS 4 正在开发中，我迫不及待地想看到它的发布。你可以阅读官方公告在 Tailwind CSS 博客上，但这里有一些亮点

• 全新的引擎，更快、更小、更高效
• Tailwind CSS 4 将使用现代 CSS 功能，例如@layer,@property,color-mix(),@starting-style、锚点定位、容器查询等
• 自动内容检测：无需在配置文件中列出所有标记文件。Tailwind CSS 将自动检测所有标记文件中的类名并生成必要的 CSS。
• 无需tailwind.config.js文件。一切都将直接在 CSS 文件中完成。
• Tailwind CSS 4 将对颜色和所有其他令牌使用 CSS 变量。

更多信息请阅读Tailwind CSS 博客

即将推出的 Tailwind CSS 4 插件 API

Tailwind CSS 4 的插件 API 仍在开发中。目前无法将 daisyUI 与 Tailwind CSS 4 的 alpha 版本一起使用，但一旦新的 API 发布，我们将更新 daisyUI 以使其与之兼容。

Tailwind CSS 3 及更低版本中的插件预计是 CSS-in-JS。但预计在 Tailwind CSS 4 中将是纯 CSS 文件。

这将使在你的 Tailwind CSS 项目中更容易将 daisyUI 用作插件，并且由于它将是一个纯 CSS 文件，而无需任何将 CSS 转换为 CSS-in-JS 的构建过程，因此也将使我们更容易维护和更新 daisyUI。

使用当前 Tailwind CSS 4 的 alpha 版本，从技术上讲，你可以将 daisyUI 的整个 CSS 文件导入到你的项目中，但它不会作为 Tailwind CSS 插件运行。 这意味着它将在你的生产 CSS 文件中包含所有未使用的类名。 并且你将无法使用 Tailwind CSS 响应式前缀，例如lg与 daisyUI 类名一起使用。因此，将 daisyUI 用作 Tailwind CSS 插件非常重要。 因此，让我们等待新的 Tailwind CSS 4 插件 API 发布。

无需 JS 配置

如果 Tailwind CSS 4 将允许导入 CSS 文件作为插件，我们将不需要 daisyUI 的 JS 配置文件。一切都将在 CSS 文件中完成。

你将能够使用 CSS 将 daisyUI CSS 文件作为 Tailwind CSS 插件包含进来@import规则。

每个组件和每个主题的纯 CSS 文件

以前，daisyUI 使用构建过程将 CSS 文件转换为 CSS-in-JS。但是随着即将推出的 Tailwind CSS 4 插件 API，我们将能够在 daisyUI 源代码中包含每个组件和每个主题的纯 CSS 文件。 这将使在你的项目中使用 daisyUI 的特定组件成为可能，而无需包含整个 CSS 文件。

原生 CSS 嵌套

现在所有现代浏览器都支持原生 CSS 嵌套。

在即将推出的 daisyUI 版本中，我们将使用原生 CSS 嵌套而不是 Post CSS 嵌套。这将大大减小 CSS 文件的大小。

无需强制颜色格式转换

Tailwind CSS 4 中的颜色将定义为 CSS 变量，Tailwind CSS 将使用 CSScolor-mix()函数来更改颜色的不透明度。这意味着我们无需将颜色转换为特定格式即可在 Tailwind CSS 中使用。 daisyUI 内置主题将继续使用 OKLCH 颜色格式，因为它是目前最符合人体工程学的 P3 颜色格式，但你可以为你的自定义主题使用任何颜色格式，我们不会在生产 CSS 文件中将它们转换为 OKLCH，仅仅是为了与 Tailwind CSS 不透明度实用程序兼容。

daisyUI 5 的一个挑战将是生成可选颜色（例如*-content）像以前一样，因为

• 如果我们不使用纯 CSS 文件，我们将不会在构建时使用 JS 处理颜色值
• CSScolor-contrast()函数尚不支持浏览器尚未
• CSScolor-contrast()函数尚不支持 Lightning CSS（Tailwind CSS 4 使用的 CSS 解析器）尚未。

更少（或零？）依赖项

daisyUI 目前使用 4 个依赖项

• postcss-js将 CSS 转换为 CSS-in-JS，因为 Tailwind CSS 3 及更低版本仅接受 CSS-in-JS 语法作为插件
• culori用于转换颜色
• picocolors用于控制台颜色
• css-selector-tokenizer用于添加前缀

如果 daisyUI 包将仅包含纯 CSS 文件，我们可以安全地删除所有这些依赖项。 我仍然不确定如果我们不使用 Post CSS 处理样式，我们如何在 daisyUI 类名中添加前缀，但我会找到办法的。

响应式组件的容器查询

现在所有现代浏览器都支持容器查询。默认情况下，我们将对需要根据其容器宽度进行响应式设计的组件使用它们。

CSS Popover API 和锚点定位

我们一直在使用 CSS:focus或<details>元素用于 daisyUI 中的下拉菜单，因为它们是当时我们拥有的最佳无 JS 选项。它们的问题是，在不使用 JS 的情况下，无法通过单击外部或单击按钮来关闭下拉菜单。你必须选择一个。 但现在我们有了一个新的选项：原生 HTMLpopover API现在所有现代浏览器都支持我们将在 daisyUI 中将其用于下拉菜单。还有CSS 锚点定位这可以帮助定位下拉菜单，防止它们超出视口。

设计改进

大多数组件都会有小的设计改进。不会破坏你当前的设计，但会使它们看起来更好。

新组件

daisyUI 5 中将有新组件。我会在它们准备好后宣布它们。

主题

daisyUI 目前有 32 个内置主题。可能我们在 daisyUI 5 中会有更多内置主题。

并且每个现有主题都将是一个简单的 CSS 文件，你可以将其包含在你的项目中（或者你可以使用一个导入规则包含所有主题）。当一切都只是一个简单的 CSS 文件时，感觉很好，对吧？

更小的 CSS 文件大小

今年，许多新的 CSS 功能在所有现代浏览器中都可用了。借助新的 Tailwind CSS 4 更改，我们将能够使 daisyUI 样式更简洁，CSS 文件更小。

组件的可自定义尺寸

我们将对组件的尺寸值使用 CSS 变量。这将使通过更改一些 CSS 变量来定制项目中所有组件的大小变得更容易，而无需为每个组件添加实用程序类。

此功能将使你更好地控制组件的大小，并使你更容易完全控制项目的设计。

向后兼容性

daisyUI 5 将与 Tailwind CSS 4 和所有现代浏览器兼容。

daisyUI 4 仍将适用于那些无法升级到 Tailwind CSS 4 或想要支持旧浏览器的人。

我们将确保从 daisyUI 4 到 daisyUI 5 的升级过程尽可能顺利，并且我们将提供迁移指南。

结论

daisyUI 5 将是一次重大更新，它将适应 Tailwind CSS 4 的新功能以及现在所有现代浏览器都可用的新 CSS 功能。我很高兴 Tailwind CSS 4 的发布，我将确保 daisyUI 5 在 Tailwind CSS 4 发布后尽快准备就绪。

订阅 daisyUI 新闻通讯，以获取有关更新的通知。