在Bootstrap之后，TailwindCSS俨然成为了前端框架扛把子。虽然新的UI如雨后春笋一般的出现，但是大多数都是基于TailwindCSS之上进行的优化和改良，而它们的出现和繁荣，也反过来继续让TailwindCSS坐稳了头把交椅。我们今天的要介绍的HeroUI就是基于TailwindCSS进行设计的UI框架。

什么是HeroUI

HeroUI，作为 NextUI 的升级版，正逐渐成为开发者的热门选择。它基于 Tailwind CSS 构建，不仅继承了 NextUI 的优秀特性，还在此基础上进行了多方面的优化和扩展。

优点

轻量级与高性能

HeroUI 采用了 Tailwind CSS 这一功能强大的实用工具优先级 CSS 框架，这意味着它没有运行时样式，也不会在你的代码包中添加不必要的类，从而确保了高效的开发体验和快速的页面加载速度。这种轻量级的特性使得 HeroUI 在各种网络环境下都能表现出色，为用户提供流畅的交互体验。

暗黑主题

HeroUI 自带暗黑主题，并且能够自动识别 HTML 主题属性的变化，从而自动切换主题。你只需要在 HTML 元素上添加 dark 属性，就可以轻松地将暗黑模式应用到你的应用程序中。这种便捷性大大节省了开发时间，同时也满足了用户对于不同视觉风格的需求。

高度可定制

HeroUI 提供了一个自定义的 Tailwind CSS 插件，允许你自定义默认主题或创建全新的主题。你可以通过修改 semantic tokens 来改变颜色、字体、间距等所有设计元素，以满足不同的设计需求。这种高度的可定制性使得 HeroUI 能够适应各种项目风格，无论是现代简约还是复古华丽，都能轻松实现。

丰富的组件库

目前，HeroUI拥有200多个组件，从基础的一些表单组件，一直到高级的AI组件，HeroUI的组件非常的丰富。这些组件都是经过设计师精心设计的，因此无论是在视觉上，还是组件统一性上面，都做到了极致。

模块化设计

HeroUI采用了模块化设计，也就是说你可以按需加载，当你的项目只需要一些组件的时候，你只需要加载所需组件的包就可以，这大大提升了加载速度。

使用

安装HeroUI库非常的方便，只需要选择你喜欢常用的包管理工具如npm,pnpm,yarn等，然后执行安装命令即可，这里以yarn为例，介绍如何安装和使用。

yarn global add heroui-cli

安装好heroui的命令行工具之后，我们就可以通过它来初始化项目。

heroui init my-heroui-appcd my-heroui-app && yarn install

当我们的项目需要哪些组件的时候，我们直接添加即可。

heroui add button input import * as React from "react";import {Button} from "@heroui/button";function App() { return ( <Button>Press me</Button> );}总结

HeroUI 拥有一个活跃的社区，你可以通过访问其官方网站、GitHub 仓库或加入相关的开发者社区来获取支持、分享经验或参与贡献。社区中的开发者们会定期交流使用心得、解决问题并共同推动 HeroUI 的发展。无论是个人项目还是企业应用，HeroUI 都能为你提供高效、美观的 UI 解决方案，帮助你快速构建出专业的用户界面。