使用Tailwind CSS必须知道的26个组件库

Tailwind 是一个实用程序优先的 CSS 框架,提供了一整套预先设计的样式和组件,使您可以轻松创建令人惊叹的 UI,而无需自定义 CSS。

然而,即使拥有 Tailwind 大量的预先设计的样式,从头开始构建网站或应用程序仍然是一项艰巨的任务。这就是 Tailwind 组件库派上用场的地方。在本文中,我们将探索 2023 年 24 个最佳免费 Tailwind CSS 组件库,每个库都提供一组独特的组件,帮助您更快、更高效地构建下一个项目。无论您是经验丰富的 Web 开发人员还是刚刚入门,这些组件库都将使您的工作流程更加顺畅和愉快。

该列表还在不断丰富种, 最新更新将发布在24 个最佳 Tailwind CSS 组件库, 另外我们希望得到您的反馈, 以便我们给各组件库一个公道的评价。 推荐指数从一星到五星, 你会给您接触过的组件库几颗星并给出您的看法, 欢迎到原文下方留言。

1. Tailwind css 组件库列表

  1. Tailwind UI

  2. Tailwind Elements

  3. Tailwind Components

    Tailwind Components是一个提供基于 Tailwind CSS 的 UI 组件和模板的在线平台。Tailwind Components 则进一步扩展了 Tailwind CSS 的应用范围,提供了大量现成的 UI 组件,让开发者可以更加高效地进行前端开发。这些组件包括但不限于下拉菜单、表单控件、导航栏、卡片布局、模态框等,都是基于 Tailwind CSS 的样式和理念设计的。在 Tailwind Components 的平台上,开发者可以浏览各种组件的示例和代码,并根据自己的需求进行选择和修改。这些组件的代码都是开源的,可以方便地集成到现有的项目中。同时,Tailwind Components 也支持开发者上传和分享自己的组件,形成了一个开放、共享的社区。

  4. Tailwind Toolbox

  5. Flowbite UI Kit

  6. Saas Blocks

  7. shadcn/ui

  8. Tailwind UI Kit

  9. Meraki UI

  10. Daisy UI

  11. Float UI Components

  12. Material Tailwind

  13. WindUI

  14. Tailblocks

  15. Tailwind Starter Kit

  16. Windframe Blocks

  17. Tailkit

  18. Tailgrids Component library

  19. Mamba UI

    Mamba UI 是今年上榜的多个基于 Tailwind 的工具中的第一个。这是一个包含 150 多个组件和模板的 UI 库,基于流行的实用程序优先 CSS 框架。该库包含 40 多个类别的预样式组件,您可以快速获取 HTML、Vue 或 JSX 格式的任何组件的代码。

  20. Flowrift UI Blocks

  21. Preline UI Components

  22. Hyper UI

  23. Tocinocode UI Components

  24. Headless UI

  25. Sailboat UI

    Sailboat UI 是一个基于 Tailwind 的 UI 组件库,包含 150 多个开源组件。这些组件非常类似于 Bootstrap,您可以在文档中搜索并查看组件的实时预览。

  26. Tailwind Stamps

  27. shuffle

  28. vercel

2. Tailwind css 模板库列表

3. tailwind 博客列表

4. 组件对比

4.1. 用户交互类组件

4.1.1. number input

组件库:

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.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.3. sidebar

组件库:

4.4.4. tabs

组件库:

4.4.5. scrollbar

组件库:

4.4.6. collapse

组件库:

chip

组件库:

4.5. 信息展示类

4.5.1. accordion

组件库:

4.5.2. alerts

组件库:

4.5.3. avatar

组件库:

4.5.4. badge

组件库:

4.5.5. banner

组件库:

4.5.6. cards

组件库:

组件库:

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.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:

SaaS blocks Blog

Auth templates:

SaaS blocks Auth

Settings templates:

SaaS blocks Settings

6. 关联阅读

tailwindcss 教程

从@Angular/Flex-Layout 迁移到 Tailwindcss

7. 参考文档

11 Best Tailwind CSS Component Libraries in 2023

Top 5 Tailwind Component Libraries

Top 12 Tailwind CSS UI Kits and Components

使用Tailwind CSS必须知道的26个组件库

https://pengtech.net/sass/tailwind_best_component_libs.html

作者

鹏叔

发布于

2023-12-08

更新于

2024-07-10

许可协议

评论