使用Tailwind CSS必须知道的26个组件库
Tailwind 是一个实用程序优先的 CSS 框架，提供了一整套预先设计的样式和组件，使您可以轻松创建令人惊叹的 UI，而无需自定义 CSS。
然而，即使拥有 Tailwind 大量的预先设计的样式，从头开始构建网站或应用程序仍然是一项艰巨的任务。这就是 Tailwind 组件库派上用场的地方。在本文中，我们将探索 2023 年 24 个最佳免费 Tailwind CSS 组件库，每个库都提供一组独特的组件，帮助您更快、更高效地构建下一个项目。无论您是经验丰富的 Web 开发人员还是刚刚入门，这些组件库都将使您的工作流程更加顺畅和愉快。
该列表还在不断丰富种， 最新更新将发布在24 个最佳 Tailwind CSS 组件库， 另外我们希望得到您的反馈， 以便我们给各组件库一个公道的评价。 推荐指数从一星到五星， 你会给您接触过的组件库几颗星并给出您的看法， 欢迎到原文下方留言。
1. Tailwind css 组件库列表
Tailwind Components是一个提供基于 Tailwind CSS 的 UI 组件和模板的在线平台。Tailwind Components 则进一步扩展了 Tailwind CSS 的应用范围，提供了大量现成的 UI 组件，让开发者可以更加高效地进行前端开发。这些组件包括但不限于下拉菜单、表单控件、导航栏、卡片布局、模态框等，都是基于 Tailwind CSS 的样式和理念设计的。在 Tailwind Components 的平台上，开发者可以浏览各种组件的示例和代码，并根据自己的需求进行选择和修改。这些组件的代码都是开源的，可以方便地集成到现有的项目中。同时，Tailwind Components 也支持开发者上传和分享自己的组件，形成了一个开放、共享的社区。
Mamba UI 是今年上榜的多个基于 Tailwind 的工具中的第一个。这是一个包含 150 多个组件和模板的 UI 库，基于流行的实用程序优先 CSS 框架。该库包含 40 多个类别的预样式组件，您可以快速获取 HTML、Vue 或 JSX 格式的任何组件的代码。
Sailboat UI 是一个基于 Tailwind 的 UI 组件库，包含 150 多个开源组件。这些组件非常类似于 Bootstrap，您可以在文档中搜索并查看组件的实时预览。
2. Tailwind css 模板库列表
模板类型包括：spotlight, salient, Protocal, Commit(changelog), Primer, Studio, Pocket, Transmit, Syntax, Keynote
模板类型包括：Mailgo, IO Academy, Starboard, Split, Blinder
模板类型包括：Admin, Landing page, Blog, store, Support, Portfolio, Navigation, Login, Starter
模板类型包括：Dashboard, Hero Header, Blog
模板类型包括：Dashboard, Blog, Agency, Business, Saas, Startup, Ecommerce, Dashboard
模板类型包括：Landing page, Dashboard, Error Page
模板类型包括：Business, Portfolio
3. tailwind 博客列表
4. 组件对比
4.1. 用户交互类组件
4.1.1. number input
组件库：
- flowbite number input
- tailwindcomponents number input counter
- tailwindcomponents number input
- preline number input
- tailwindtoolbox number input counter
4.1.2. input field
组件库：
4.1.3. file input
组件库：
4.1.4. search input
组件库：
4.1.5. phone input
组件库：
4.1.6. select
组件库：
4.1.7. textarea
组件库：
4.1.8. timepicker
组件库：
datepicker
组件库：
4.1.9. checkbox
组件库：
4.1.10. radio
组件库：
4.1.11. radio
组件库：
4.1.12. toggle
组件库：
4.1.13. range
组件库：
4.1.14. floating label
组件库：
4.1.15. buttons
组件库：
4.1.16. button group
组件库：
4.1.17. modal
组件库：
4.1.18. popover
组件库：
4.1.19. skeleton
组件库：
4.2. 排版（Typography）
4.2.1. headings
组件库：
4.2.2. paragraphs
组件库：
4.2.3. images
组件库：
4.2.4. blockquote
组件库：
4.2.5. lists
组件库：
list group
组件库：
4.2.6. links
组件库：
4.2.7. text
组件库：
4.2.8. Horizontal Line
组件库：
4.3. 导航类组件
4.3.1. bottom navigation
组件库：
4.3.2. breadcrumb
组件库：
4.3.3. mega menu
组件库：
4.3.4. navbar
组件库：
4.3.5. speed-dial
组件库：
4.3.6. stepper
组件库：
4.3.7. toast
组件库：
4.3.8. tooltips
组件库：
4.4. 布局类组件
4.4.1. drawer
组件库：
4.4.2. footer
组件库：
4.4.3. sidebar
组件库：
4.4.4. tabs
组件库：
4.4.5. scrollbar
组件库：
4.4.6. collapse
组件库：
chip
组件库：
4.5. 信息展示类
4.5.1. accordion
组件库：
- flowbite accordion
- tailwindcomponents accordion
- preline accordion
- tw-elements accordion
- tailwindtoolbox accordion
4.5.2. alerts
组件库：
4.5.3. avatar
组件库：
- flowbite avatar
- tailwindcomponents avatar
- preline avatar
- preline avatar group
- tw-elements avatar
- floatui avatar
- tailwindtoolbox circular avatar
4.5.4. badge
组件库：
4.5.5. banner
组件库：
4.5.6. cards
组件库：
4.5.7. gallery
组件库：
4.5.8. indicators
组件库：
4.5.9. Jumbotron
组件库：
4.5.10. list group
组件库：
4.5.11. pagination
组件库：
4.5.12. progress
组件库：
4.5.13. spinner
组件库：
4.5.14. ratings
组件库：
4.5.15. tables
组件库：
4.5.16. timeline
组件库：
4.5.17. calendar
组件库：
4.5.18. carousel
组件库：
4.5.19. charts
组件库：
4.6. 其他
4.6.1. chat bubble
组件库：
4.6.2. clipboard
组件库：
4.6.3. device mockups
组件库：
4.6.4. Keyboard
组件库：
5. 推荐
Landing page templates:
Play - Free Tailwind CSS SaaS Template
Blog templates:
Auth templates:
Settings templates:
6. 关联阅读
从@Angular/Flex-Layout 迁移到 Tailwindcss
7. 参考文档
11 Best Tailwind CSS Component Libraries in 2023