daisyUI v5 – What’s New? 🤔

daisyUI v5 是流行的 Tailwind CSS 组件库的最新版本，引入了多项改进，旨在提高自定义和开发效率。自发布以来，daisyUI 因其易用性、全面的组件集以及与 Tailwind CSS 的无缝集成而广受欢迎。在 daisyUI v5 中，该库不断改进，提供新功能、增强功能和更具可自定义性的组件设计方法。

本文探讨了什么是 daisyUI，它有什么特别之处，以及 daisyUI v5 中引入的主要新功能。

什么是 daisyUI？

daisyUI 是一个开源的、基于插件的 Tailwind CSS 组件库，它提供了一组预构建的 UI 组件，例如按钮、表单、模态框、警报和导航栏。它旨在通过提供广泛的可自定义组件来加快开发速度，帮助开发人员避免从头开始构建常见 UI 元素的重复性任务。

该库很容易集成到任何基于 Tailwind 的项目中，使开发人员能够创建美观、响应迅速的网站，而无需手动设置每个组件的样式。这对于快速原型设计特别有用，但对于生产应用程序来说也足够强大。无论您是构建小型个人项目还是大型应用程序，daisyUI 都可以改变游戏规则。

daisyUI 的主要特点

以下是 daisyUI 的一些主要功能：

Utility-First 集成
预构建的组件，如按钮、卡片、表单和输入。等。
响应迅速且可访问
高度可定制

daisyUI v5 中令人兴奋的更新

Tailwind CSS 4 兼容性：daisyUI v5 现在与 Tailwind CSS 4 无缝协作，因此您可以充分利用所有新功能。将 daisyUI 作为插件直接添加到您的 CSS 文件中非常容易。
无外部依赖项：此更新中最大的改进之一是 daisyUI 不再依赖外部依赖项。这会导致更简洁的设置和更有序的 node_modules 文件夹。
文件大小小很多：通过将 daisyUI 集成为 Tailwind 插件，只有基本样式才会包含在最终的 CSS 中。一些令人印象深刻的统计数据包括：
- NPM 封装尺寸减小 61%
- CDN 文件缩小了 75%，完全支持所有类名。
更好的颜色管理：daisyUI v5 使颜色处理变得更加容易。现在，颜色存储在 CSS 变量中，它支持多种格式并允许更轻松地进行自定义，尤其是在使用浏览器开发工具时。

查看顶级顺风 CSS 颜色生成器，让您的项目吸引人。

daisyUI v5 中的构建和集成增强功能

完全原生 CSS 嵌套支持：CSS 嵌套现在得到普遍支持，有助于减少重复的 CSS 规则并导致浏览器中的 CSS 文件更小。
ESM（ECMAScript 模块）兼容性：daisyUI v5 现在与 ESM 兼容，允许您在 JavaScript 项目中有选择地导入和使用库的某些部分。
无依赖项的前缀：daisyUI v5 支持在没有任何依赖项的情况下使用类名前缀，从而简化了集成过程。
用于无构建环境的微型 CSS 文件：对于服务器端渲染的项目（Rails、Django、PHP 等）或没有 JS 构建步骤的项目（HTMX、Alpine.js、WordPress），您现在可以使用部分 daisyUI，而无需完整的库，甚至没有 Tailwind CSS。例如，您可以只包含切换组件的样式和一个小的 CSS 文件。
包含/排除特定库部件：daisyUI v5 引入了包含或排除特定组件的功能。只想要“切换”组件？现在，您可以仅包含该组件并排除其他所有内容！
或者，如果您想排除库的特定部分，您也可以这样做！

增强的设计系统功能

令人兴奋的新“效果”CSS 变量：DaisyUI 5 引入了一组全新的全局和主题特定效果，可以轻松打开或关闭这些效果。这些效果优化了按钮、复选框、切换等基本组件的外观。目前，可用的效果包括：
- --depth：添加微妙的深度效果，为组件创建视觉上吸引人的分层外观。
- --noise：向组件添加带纹理的杂色效果，从而提供更有触感、更动态的感觉。
这些效果可以通过 CSS 变量轻松自定义。前往新的 Theme Generator 页面探索它们的工作原理！
我引入了“X-Large”大小选项：除了之前的大小修饰符（、、和）之外，DaisyUI 现在还提供了新的大小修饰符。这为您提供了更大的灵活性来调整组件大小，帮助您构建更具适应性和响应性的设计。xssmmdlgxl
改进的尺寸比例：与 DaisyUI 4 不同，DaisyUI 5 中新的默认尺寸比例在视觉上和谐且更具吸引力。最好的部分是什么？它是完全可定制的，以满足您的设计需求。
轻松的尺寸比例定制：手动调整组件大小的日子已经一去不复返了。在 DaisyUI v5 中，组件尺寸比例现在使用 CSS 变量进行标记化，允许您全局或按主题定义它们。根据您的设计需求，将您的组件自定义为更短、更高或完美比例。
- --size-field：定义输入字段、按钮、选项卡等字段的基本大小：设置复选框、单选按钮、切换、徽章等选择器的基本大小。--size-selector
在新的 Theme Generator 页面上探索这一切是如何组合在一起的！

查看基于 DaisyUI 的 Tailwind Components Library。

FlyonUI Tailwind CSS 组件库

FlyonUI 是免费的 Tailwind CSS 组件库，旨在结合两全其美：语义类的美学吸引力和 JS 插件的强大功能。

在后台，它利用了以下优势：

顺风 CSS一个实用优先的 CSS 框架，可帮助您轻松构建漂亮的网站。
DaisyUI 将组件语义类名称添加到 Tailwind CSS，以便您可以更快、更轻松、更易维护地制作精美的网站。
预划线JavaScript 无头和完全无样式的 Tailwind 插件，用于可访问、响应式 UI。通过动画、过渡等增强体验。

特征：

JS 插件支持
语义组件
800+ 免费组件示例
通用框架兼容性
无限主题
无样式且可访问的插件
响应式和 RTL 支持
永久免费
美观且语义化的样式
效率和生产力
可维护和可扩展

daisyUI v5 中的其他突破性设计更新：

可定制的边框大小：按钮、输入、选项卡等的边框现在是完全可定制的。使用变量全局或按主题调整边框大小，从而轻松匹配您的设计风格。查看新的主题生成器，了解它的实际效果！--border
引入新的组件样式：soft、dashDaisyUI 现在提供两种新的组件样式：和 .softdash
- 该样式为元素创建更柔和、更圆润的外观。soft
- 该样式为按钮、徽章和警报等组件添加了时尚的虚线边框。dash
完全响应式修饰符类：DaisyUI 5 为所有修饰符类带来了真正的响应性。现在，您可以在所有组件修饰符类中应用响应式修饰符，如 md：、lg： 等，而不仅仅是一组有限的修饰符。这使您的设计更加灵活和自适应。
颜色格式自由：DaisyUI 5 提供了完整的颜色格式灵活性。与以前需要 CSS 变量和不透明度修饰符的特定颜色格式的版本不同，DaisyUI 现在允许您使用您喜欢的任何颜色格式，而无需担心自动转换。
- 在早期版本的 Tailwind CSS（4 之前）中，必须在构建时生成颜色值，并且颜色和不透明度修饰符的 CSS 变量仅限于某些格式。
- 使用 Tailwind CSS 4，将 CSS 变量用于颜色和不透明度控制意味着您可以使用任何颜色格式，而无需担心构建过程中的转换。color-mix()
虽然 DaisyUI 的内置主题使用 OKLCH 颜色格式（我推荐用于自定义主题），但您可以自由选择您喜欢的任何颜色格式。DaisyUI 和 Tailwind CSS 都不会强制转换，让您可以完全创造性地控制您的配色方案。

Fresh 主题和样式增强功能

我引入新主题：DaisyUI v5 为您带来 3 个充满活力的全新主题来提升您的设计：
- caramellatte– 温暖、诱人的浅色主题，棕色和米色色调和谐融合。
- abyss– 醒目的深暗主题，具有独特的绿色、蓝绿色和发光磷色调调色板。
- silk– 大胆而干净的设计，具有清晰、明亮的背景和醒目的荧光文字颜色。
革命性的主题生成器：探索全新的主题生成器，您可以在其中轻松制作自己独特的主题。自定义现有选项、扩展当前设计或使用强大的调色板生成器轻松创建令人惊叹的独一无二的主题。

daisyUI v5 中令人兴奋的新组件

引入新组件：daisyUI v5 引入了几个新组件来增强您的 UI：

重大更改：

以下是 daisyUI v5 的一些重大变化

类名的更改：

重命名了几个类名，并删除了一些未使用的类名。了解更多。

配置中的重大更改：

您不再需要 — 直接在 CSS 文件中使用新的配置格式。它更简单、更灵活、更强大。了解更多。tailwind.config.js

删除的主题变量：

--animation-btn已删除（不再需要）
--animation-input已删除（不再需要）
--btn-focus-scale已删除（不再需要）

通过以下链接，阅读 daisyUI v5 中每个更新组件和更改的完整更改日志，以获取所有详细信息。