免费的 Tailwind CSS 主题和模板

Tailwind CSS 是一个开源的、实用优先的 CSS 框架，在过去一年中人气日益高涨。它是一个高度可定制的低级 CSS 实用类集合，用 PostCSS 编写，可使用 JavaScript 进行自定义。

我们在 Themesberg 上讨论了不少有关 Tailwind CSS 的主题，例如将它与 Bootstrap 进行比较、编写完整的教程，甚至为该框架创建了一个专门的知识中心。

我希望这篇博文能成为现有和即将推出的免费 Tailwind CSS 主题、模板和 UI 套件的书签参考。您可以放心，此列表中提供的模板均经过 Themesberg 核心团队的质量检查，并且随着该框架的普及，我们将持续更新此列表。

事不宜迟，我将向您展示最好的免费 Tailwind CSS 主题、模板和 UI 工具包。

Flowbite - Tailwind 组件库

Flowbite 是一个免费的开源 Web 组件和交互元素库，使用 Tailwind 的实用程序类构建，包括按钮、警报、导航栏、下拉菜单、模式等。

一个明显的优势是，下拉菜单和其他元素的交互功能仅使用 Vanilla JavaScript 进行编码，并且大多数元素不需要包含另一个库，只需 Tailwind 即可。

我最喜欢这款套件的地方在于它鲜艳的色彩，以及它兼容 React、Angular 和 Vue 的代码。它包含一些现成的组件、一些落地页，甚至还有一个管理仪表盘界面。我记得这款套件曾在 Product Hunt 上被推荐过，甚至成为了当天的第三款产品。

另一个很大的优点是它提供了文档，帮助你入门，并很好地概述了可用的组件。你可以选择包含 CDN 链接以快速入门，或者下载源文件以充分利用 Tailwind 配置文件。

总而言之，我推荐 Creative Tim 的 Tailwind Starter Kit，因为它是目前在组件、设计和文档方面最完整的 Tailwind CSS 套件。

TailBlocks 是另一个很棒的资源，它包含 60 多个组件和部分，你可以用它们快速开始使用 Tailwind CSS 构建网站。它包含各种常用的网站部分，例如导航栏、首页部分、定价部分、联系方式部分、页脚等等。

它是根据 MIT 许可证开源的，这意味着您可以将这些部分用于个人用途或商业用途。缺点是这些元素没有任何特殊的样式，但如果您想应用自己的样式并仅将其用作网站的线框，这也可以被视为优点。

您还可以快速在暗模式和亮模式之间切换，并为您正在查看的部分应用自定义颜色。

Meraki UI 是另一组由 Tailwind CSS 提供支持的开源组件和部分，遵循 MIT 许可，包含大约 43 个组件和部分，可用于快速构建网站用户界面。

Meraki UI 的独特之处在于它通过文档的切换按钮直接提供 RTL 支持。对于需要为习惯从右向左阅读的国家/地区提供用户界面的开发者来说，这是一个巨大的优势。

虽然我们希望有更多的组件，但这是一个不久前启动的项目，我们可以期待未来的一些更新。

我知道这个列表不太长，但我尽力从用 Tailwind CSS 制作的稀缺主题和模板中筛选出最优质的资源。只要社区不断提供新的高质量模板和工具，这个列表很可能会经常更新。

这款针对与 Tailwind CSS 集成进行了优化的Figma 设计套件不仅具有漂亮的用户界面，还具有强大的 Figma 功能，例如组件的变体、自动布局、基于 Tailwind 实用程序类的样式指南，甚至还有用于移动设备的单独屏幕。

FlowBite有一个免费的社区版本，您可以轻松复制并试用，然后再购买完整版。我试用过免费版和完整版，不得不说，两者的区别在于数量。免费版的功能质量与 Figma 相同。

团队已经在开发 Tailwind CSS 代码的等效版本，预计将于 2020 年 8 月 10 日发布。我注意到，FlowBite 的落地页也是使用该套件和 Tailwind CSS 构建的。太棒了！

我还喜欢这个项目有一份详细记录的路线图/变更日志，它可以让你很好地了解未来的预期。

如果您想推荐资源，请随时在评论部分告诉我们。