2020年10+个免费Tailwind CSS模板和资源

什么是Tailwind CSS?

Tailwind CSS与Bootstrap,Foundation或Bulma之类的框架不同,因为它不是UI工具包,并且没有默认主题或内置UI组件。当然,如果您不介意标记中的重复内容,那么在自定义方面这是一个非常强大的框架,因为您可以创建可以想象的任何网站。因此,您就是设计“船长”。

根据官方网站的说法,它是实用程序优先的CSS框架,可用于快速构建定制设计。 Tailwind CSS是一个高度可定制的低级CSS框架,它为开发人员提供了构建定制设计所需的所有构建块,而没有任何烦人的自以为是的样式。

Tailwind CSS框架相对于Bootstrap有什么优势?

尽管Bootstrap是一个较旧且一致的框架,但Tailwind CSS如今在开发人员中越来越受欢迎。它发布不到3年前,每月已经有超过2千次Google搜索。

使它快速增长的功能包括:

  • 高度可定制
  • 快速设置
  • 多才多艺
  • 没有JavaScript。因此,您可以轻松地将其与您选择的任何JavaScript框架绑定

我们认为最重要的优势是,尽管大多数Bootstrap网站看起来几乎相同,但Tailwind CSS网站可以具有您独特的标记:)。

Tailwind CSS模板和资源示例

如果您已经开始使用这个很棒的框架,或者您只是对它的工作方式感到好奇,那么这里有一些基于Tailwind CSS的模板和组件的示例。

1. Creative Tim-Tailwind入门套件

Tailwind Starter Kit是TailwindCSS的一个漂亮扩展,它是免费和开源的。它不会更改或从TailwindCSS向已添加的CSS添加任何CSS。它具有多个HTML元素,并带有动态组件 用于ReactJS,Vue和Angular。

特征:

  • Tailwind Starter Kit附带了大量的完全编码CSS组件
  • 它具有用于React,Vue和Angular的许多动态组件,请在此处阅读文档
  • 此扩展程序还带有4个模板页面:
    • 轮廓
    • 登录
    • 登陆页面
    • 仪表板

尾风入门套件

资料下载实时预览|获取托管

2.管理模板之夜-尾风工具箱

Admin Template Night是使用Tailwind CSS框架的开源入门模板。由于其深色模式外观,因此非常适合2020年Web设计项目。

特征:

  • 带搜索栏和下拉菜单的多行导航栏
  • “夜间模式”主题-请参阅替代的“白天模式”主题。
  • 使用Chart.js的占位图

管理模板之夜

资料下载实时预览|获取托管

3.个人资料卡-尾风工具箱

此Profile Card模板是用于Tailwind CSS项目的非常有用的元素,它也是免费和开源的。

它包含了:

  • 个人资料卡-手机/桌面的不同布局
  • 两个用户个人资料图像的空间(移动/台式机)
  • 日/夜模式切换

个人资料卡

资料下载实时预览|获取托管

4.表格响应式过滤器-尾风组件

此响应表是Tailwind CSS的免费开源组件。

它包含了:

  • 筛选器
  • 分页

表响应式过滤器

资料下载实时预览|获取托管

5. Bolt App-登陆作品集

Bolt App是免费的入门模板,非常适合快速开始在Tailwind CSS中创建网站。

它包含了:

  • 固定头
  • 英雄部分–带有CSS浏览器窗口的应用程序/网站屏幕截图
  • 促销和卡片内容部分
  • 定价表
  • 号召性用语部分

螺栓应用

资料下载实时预览|获取托管

6.用于TailwindCSS的Figma设计套件

Figma Design Kit是一个免费的开源实用程序优先的CSS框架,用于快速UI开发。

Figma设计套件

资料下载实时预览|获取托管

7.颜色和字体

Colors&Fonts是一个免费的颜色,字体和资源精选库,供使用Tailwind CSS框架的Web开发人员和数字设计师使用。

特征:

  • 干净的布局,连续大量的调色板和渐变
  • 通过代码描述获取调色板,渐变和字体配对的图像
  • 数字设计页面,Web开发CSS资源
  • Chrome扩展程序可快速访问

颜色和字体

实时预览|获取托管

8.管理仪表板模板-Tailwind工具箱

此管理仪表板模板是Tailwind CSS的开源免费模板。

它包含了:

  • 带搜索栏和下拉菜单的标题
  • 导航列表,可换行到小屏幕的下一行
  • 侧栏成为小屏幕的固定页脚
  • 使用Chart.js的占位图

管理员仪表板模板

资料下载实时预览|获取托管

9. Vue尾风

VueTailwind是一组Vue组件,旨在根据您的应用程序的独特设计进行定制。默认情况下,它使用Tailwind CSS类,并且所有类都是可配置的,从而使您可以完全控制组件的外观。

不再需要像Bootstrap这样的站点,您只需配置一次就可以设置主题类。

Vue尾风

资料下载实时预览|获取托管

10.管理面板模板

此管理面板模板是基于Tailwind CSS的简单,免费且开源的管理仪表板。

管理面板模板

资料下载实时预览|获取托管

11.马兹勒

Maizzle是一个电子邮件框架,可帮助您使用实用程序优先的CSS和特定于电子邮件的高级后处理来快速构建电子邮件。

Maizzle使用Tailwind CSS框架,因此您只需将类添加到标记中就可以快速创建HTML电子邮件原型。一旦对开发预览感到满意,就可以进行生产以生成具有内联样式和许多其他特定于电子邮件的优化的干净HTML。

Maizzle

资料下载实时预览|获取托管

12. Creative Tim-Tailwind入门套件的仪表板

Tailwind入门工具包的Dashboard是Tailwind CSS的免费开放源代码管理模板。它具有多个HTML元素,并带有ReactJS,Vue和Angular的动态组件。

特征:

  • CSS组件
  • JavaScript组件
  • 复杂文档-在此处可用

Creative Tim-Dailboard by Tailwind入门套件

资料下载实时预览|获取托管

最后的想法

Tailwind CSS确实是一个了不起的框架,特别是因为它使您可以不受限制地以所需方式构建Web应用程序。例如,如果您对基于Bootstrap的网站的相似性感到厌烦,那么可以使用此框架

如果您在项目中使用过Tailwind CSS,请告诉我们您的想法:)。

资讯来源:由0x资讯编译自DEV,原文:https://dev.to/creativetim_official/10-free-tailwind-css-templates-resources-for-2020-bk5 ,版权归作者所有,未经许可,不得转载
你可能还喜欢