后端开发教程 - Java、Spring Boot 实战 - msg200.com
2020 年 10 多个免费 Tailwind CSS 模板和资源
什么是 Tailwind CSS？
Tailwind CSS 与 Bootstrap、Foundation 或 Bulma 等框架不同，因为它不是 UI 工具包，也没有默认主题或内置 UI 组件。当然，如果您不介意标记中的重复，那么它在自定义方面非常强大，因为您可以创建任何您能想到的网站。因此，您就是设计“队长”。
根据官方网站介绍，它是一个实用优先的 CSS 框架，用于快速构建自定义设计。Tailwind CSS 是一个高度可定制的低级 CSS 框架，它为开发人员提供了构建定制设计所需的所有构建块，并且没有任何烦人的刻板样式。
Tailwind CSS 框架相对于 Bootstrap 有什么优势？
尽管 Bootstrap 是一个较老且一致的框架，但 Tailwind CSS 如今在开发人员中越来越受欢迎。它发布不到 3 年，每月的 Google 搜索量已超过 2000 次。
使其快速增长的特点是：
- 高度可定制
- 快速设置
- 多才多艺的
- 它不需要 JavaScript。因此，你可以轻松地将它与你选择的任何 JavaScript 框架绑定。
我们认为最重要的优势是，虽然大多数 Bootstrap 网站看起来都差不多，但 Tailwind CSS 网站可以拥有您独特的印记 :)。
Tailwind CSS 模板和资源示例
如果您已经开始使用这个很棒的框架，或者您只是好奇它是如何工作的，这里有一些基于 Tailwind CSS 的模板和组件的示例。
1. Creative Tim - Tailwind 入门套件
Tailwind Starter Kit是免费开源的 TailwindCSS 的一个漂亮扩展。它不会更改或添加任何TailwindCSS原有的 CSS。它具有多个 HTML 元素，并附带适用于ReactJS、 Vue和Angular 的动态组件。
特征：
- Tailwind Starter Kit 附带大量完全编码的 CSS 组件
- 它具有许多适用于 React、Vue 和 Angular 的动态组件，请在此处阅读文档
- 此扩展还附带 4 个模板页面：
2. Material Tailwind Kit React
Material Tailwind Kit React是一款免费的开源 UI 套件，基于两大热门前端技术：Tailwind CSS 和 React。它旨在简化开发者创建直观界面的工作。这款灵感源自 Material Design 的惊艳产品，助您开启开发项目！
3. 管理模板之夜 - Tailwind 工具箱
Admin Template Night是一款使用 Tailwind CSS 框架的开源入门模板。由于其暗黑模式的外观，它非常适合 2020 年的网页设计项目。
特征：
- 带有搜索栏和下拉菜单的多行导航栏
- “夜间模式”主题 - 查看替代的“日间模式”主题。
- 使用Chart.js的占位图
4. 个人资料卡 - Tailwind Toolbox
此个人资料卡模板对于您的 Tailwind CSS 项目来说是一个非常有用的元素，并且它也是免费和开源的。
它包含：
- 个人资料卡 - 移动/桌面的不同布局
- 两个用户个人资料图片的空间（移动/桌面）
- 日/夜模式切换
5. 带过滤器的响应式表格 - Tailwind 组件
此响应式表格是 Tailwind CSS 的免费开源组件。
它包含：
- 过滤器
- 分页
6. Bolt App - Landing Folio
Bolt App是一个免费的入门模板，非常适合快速开始在 Tailwind CSS 中创建网站。
它包含：
- 固定标题
- 英雄部分 – 带有 CSS 浏览器窗口，用于显示您的应用/网站屏幕截图
- 促销和卡片内容部分
- 价格表
- 行动呼吁部分
7. Figma TailwindCSS 设计套件
Figma Design Kit是一个免费开源的实用优先 CSS 框架，用于快速 UI 开发。
8. 颜色和字体
Colors & Fonts是一个免费的颜色、字体和资源库，供使用 Tailwind CSS 框架的 Web 开发人员和数字设计师使用。
特征：
- 布局简洁，大量调色板和渐变排列
- 获取带有代码描述的调色板、渐变和字体配对的图像
- 用于数字设计、Web 开发 CSS 资源的页面
- Chrome 扩展程序可快速访问
9. 管理仪表板模板 - Tailwind Tool Box
此管理仪表板模板是Tailwind CSS的开源免费模板。
它包含：
- 带有搜索栏和下拉菜单的标题
- 导航列表在小屏幕上自动换行
- 侧边栏成为小屏幕的固定页脚
- 使用Chart.js的占位图
10. Vue Tailwind
VueTailwind是一组 Vue 组件，可根据您的应用程序的独特设计进行定制。它默认使用 Tailwind CSS 类，并且所有类均可配置，让您完全控制组件的外观。
不再有类似 Bootstrap 的网站，您只需配置一次主题类即可。
11. 管理面板模板
此管理面板模板是一个基于 Tailwind CSS 构建的简单、免费且开源的管理仪表板。
12. Maizzle
Maizzle是一个电子邮件框架，可帮助您使用实用优先的 CSS 和高级的电子邮件特定后处理快速构建电子邮件。
Maizzle 使用Tailwind CSS 框架，因此您只需在标记中添加类即可快速创建 HTML 电子邮件原型。对开发预览版满意后，即可进行生产构建，生成简洁的 HTML，其中包含内联样式以及许多其他电子邮件专用的优化功能。
13. Creative Tim - Tailwind 入门套件的仪表板
Tailwind Starter Kit 的 Dashboard是一款免费的开源 Tailwind CSS 管理模板。它包含多个 HTML 元素，并附带适用于 ReactJS、Vue 和 Angular 的动态组件。
特征：
- CSS 组件
- JavaScript 组件
- 复杂文档 - 可在此处获取
最后的想法
Tailwind CSS 确实是一个很棒的框架，尤其是因为它允许你按照自己想要的方式构建 Web 应用，没有任何限制。例如，如果你厌倦了基于 Bootstrap 的网站千篇一律，那么这个框架或许能满足你的需求！
如果您在项目中使用了 Tailwind CSS，请告诉我们您的想法:)。
文章来源：https://dev.to/creativetim_official/10-free-tailwind-css-templates-resources-for-2020-bk5