daisyUI Tailwind 组件库：语义化组件类加 30 余主题，纯 CSS 零 JS

daisyUI 是 Tailwind CSS 生态里最流行的组件插件。它给 Tailwind 补上语义化的组件类——btn、card、modal、drawer、navbar——让 HTML 比纯写工具类干净非常多。它自带 30 多个主题，一行属性切主题，且纯 CSS、零 JavaScript 依赖；v5 已支持 Tailwind v4，但前提是先装好 Tailwind。

它解决什么问题

纯 Tailwind 写页面，类名越堆越长，一个按钮要拼七八个工具类，HTML 可读性很差。

又担心引入组件库会被框架的视觉绑死，换风格时改不动。

核心能力

它和 Bootstrap 不是一回事

daisyUI 长期被问「你是不是 Bootstrap」。区别在于：它没有自己独立的样式体系。它产出的仍是 Tailwind 的工具类，以及你自己的 @theme 设计令牌，组件类只是把这些工具类打包成语义名。

所以你不会被 daisyUI 的视觉绑死——换主题、改令牌，整体观感就跟着变，底层还是 Tailwind 那套可控的系统。而 Bootstrap 是一套自成一体的样式框架，离开它就很难保持一致性。两者定位不同。

同类工具怎么选

谁适合用

• 用 Tailwind 但嫌工具类太长、HTML 太脏的人
• 需要快速切主题、做多套视觉的站点
• 想保留 Tailwind 可控性、又想要组件语义的人

怎么开始

1. 先安装并配置好 Tailwind，daisyUI 依赖它才能运行。
2. 按文档把 daisyUI 作为 Tailwind 插件加入配置。
3. 在 HTML 里直接用 btn、card 等语义类，替代长串工具类。
4. 给根元素加 data-theme 切换内置主题，或自定义一套。
5. 需要微调时用 CSS 变量覆盖色板与圆角等令牌。

常见问题

必须先装 Tailwind 吗？
必须。daisyUI 是 Tailwind 的插件，没有 Tailwind 它无法工作。

和 Bootstrap 有什么区别？
daisyUI 没有独立样式体系，产出仍是 Tailwind 工具类与你自己的令牌，不会被视觉绑死。

需要写 JavaScript 吗？
不需要。组件样式纯 CSS，交互靠你已有的逻辑或别的库。

授权与合规

daisyUI 采用 MIT 协议发布，可自由用于个人与商业项目。它是 Tailwind 的组件插件，需配合 Tailwind 使用，无付费墙限制核心功能。 官网：daisyui.com。