实用类和 CSS 变量

daisyUI 提供了一些有用的实用类和 CSS 变量，以帮助您更有效地使用该库。

颜色实用类

所有 daisyUI 颜色都可以用作实用类。就像任何其他 Tailwind CSS 颜色一样。
例如，您可以使用primary颜色以及任何 Tailwind CSS 颜色实用程序。

阅读更多关于颜色名称.

您可以使用bg-primary来将背景颜色设置为 primary 颜色，以及text-primary-content来将文本颜色设置为 primary 颜色。

<div class="bg-primary text-primary-content">Primary color</div>

您还可以控制颜色的不透明度，例如

<div class="bg-primary text-primary-content/60">Primary-content color with 60% opacity</div>

边框半径

Tailwind CSS 提供了固定的边框半径值，例如rounded-sm,rounded-lg,rounded-xl等等。
daisyUI 提供了更多边框半径值，这些值已针对组件进行标记化，并且可以根据主题进行自定义。

更改主题以查看边框半径的变化

玻璃效果

glass在元素上创建玻璃效果。

<div class="glass">Glass</div>

主题 CSS 变量

这些 CSS 变量可以为每个主题自定义。阅读更多关于颜色名称.

组件特定的 CSS 变量

高级用法：这些 CSS 变量在内部用于特定组件。您可能不需要自定义它们，但如果您愿意，也可以自定义。

如果您正在为 daisyUI 使用前缀，这些 CSS 变量也将以该前缀为前缀。例如，如果前缀是daisy-，则--alert-colorCSS 变量将是--daisy-alert-color.

这些变量供内部使用。它们不受语义版本控制的约束，并且其中一些变量可能会在未来的次要版本中被修改或删除，在这种情况下，您的自定义样式可能会失效，因此如果您想修改这些变量并且您的 UI 确实依赖于自定义值，请确保您使用的是 daisyUI 的固定版本，而不是最新版本。

NEXUS
官方 daisyUI 仪表板模板

在 daisyUI 商店中可用

更多详情