Tailwind CSS搞前端的小伙伴应该都很熟悉,提倡用原子类CSS直接代替传统的CSS模式。目前来看,这个生态系统正在稳步增长,Github Star
已经达到了62.8k
(截至2022年12月) 。我自己本身在开发一些项目时,也经常用到,除了类名又臭又长,用起来还是比较顺手的,不用写css的感觉真棒。
与此同时,在过去一段时间里,我还收集了很多Tailwind的组件库,今天就分享给大家。如果您正在尝试开始使用 Tailwind CSS,可以直接从一个组件库上手,重新发明轮子是没有意义的 。
Flowbite
使用 Flowbite 开始开发您的下一个项目,包含 400 多个免费 Web 组件和交互式元素,这些元素是使用 Tailwind CSS 的实用程序类构建的。每个元素都可以轻松放入任何 Tailwind 项目中,以添加全新的样式和品牌。从常见的布局元素到更小众的用户界面,这个库是快速构建任何应用程序或网站的宝贵资源。
Tailwind Components
如果您希望开始使用 Tailwind CSS 构建您的下一个站点或 Web 应用程序,那么 Tailwind Components 是一个完美的地方。这个受欢迎的网站是为 Tailwind CSS 框架制作的免费 UI 组件的开源存储库。它包括模板、演示和文档,可通过为您的新站点或应用程序提供起点来帮助您启动下一个 Web 项目。
FloatUI
Float UI 是一组交互式 UI 组件和元素,可让您使用 React 快速开发网站和 Web 应用程序。Float UI 是使用纯 React、React Router 和 Tailwind CSS 从头开始构建的,可提供构建漂亮网站所需的一切。不需要 jQuery 或第三方插件。
Tailwind Design
Tailwind Design是一个华丽的 UI 套件包,其中包含用于创建响应式 Web 应用程序的自定义组件和元素。Tailwind Design 是独一无二的,因为它具有可扩展性、易于使用、遵循 Tailwind 的原则、具有漂亮的布局,并且在制作时考虑了现代开发最佳实践。
DaisyUI
DaisyUI 是流行的 Tailwind CSS 组件的集合,在 Github 上有超过 7K 颗星,在 Twitter 上有数千名追随者。此存储库包含一组灵活的小部件,可与 Tailwind 基于组件的组件样式方法一起使用。有助于在开发中快速创建自定义 UI 以及在生产中参与设计。
如果你也有好用的Tailwind css组件网站,欢迎留言🧐~
用过 Headless UI
没必要写太长还不利于阅读,可以用apply来进行复用。
是的,@apply配合起来,很不错
就用过DaisyUI