Tailwind CSS组件教程 - 如何上手Flowbite

迪鲁宾
4,843 阅读5分钟

Flowbite是一个开源的网络组件库，它是用Tailwind CSS的实用优先类构建的。它还包括交互式元素，如下拉、模版、日期选择器。

Tailwind CSS是我最近在我的网络相关项目中经常使用的一个框架，因为它使用实用优先类来构建页面的速度非常快。

然而，我遇到的一个问题是，该框架并不包括一套基本的入门组件。所以我不得不为每个项目反复构建它们。

但后来我发现了一个基于Tailwind CSS的组件库，叫做Flowbite。它包含了最常用的网页组件，如按钮、导航条、卡片、表单元素等，这些组件都是用_Tailwind CSS的实用类_构建的，非常方便。

Flowbite - Tailwind CSS组件库

今天，我想告诉你如何开始使用这个库，并开始用Tailwind CSS和Flowbite的组件更快地构建网站。

该项目可以在Github上找到，它在MIT许可下是开源的。

开始使用Flowbite

首先，你需要了解Flowbite如何工作。这个库不是另一个框架。相反，它是一套基于Tailwind CSS的组件，你可以直接从文档中复制-粘贴。

Flowbite - Tailwind CSS表单组件

它还包括一个JavaScript文件，可以实现交互式组件，如模态、下拉和日期选择器，你可以选择通过CDN或NPM将其纳入你的项目。

你可以查看快速入门指南，通过将CDN文件纳入你的项目来探索这些元素。但如果你想用Flowbite构建一个项目，我建议你按照构建工具的步骤来做，这样你就可以清除和减化生成的CSS了。

为了更快的配置，我们将使用CDN包含所有的东西。

如何通过CDN包含Flowbite和Tailwind的CSS

首先，让我们把CSS文件包含在你的HTML的head 标签内。

<link rel="stylesheet" href="https://unpkg.com/@themesberg/flowbite@latest/dist/flowbite.min.css" />

然后在body 标签关闭之前，也包括启用互动元素的JavaScript文件。

<script src="https://unpkg.com/@themesberg/flowbite@latest/dist/flowbite.bundle.js"></script>

如果你正确地遵循了这两个步骤，你现在应该在你的项目中包含了Tailwind CSS和Flowbite，而且Flowbite的组件现在应该都能工作。

探索来自Flowbite的组件

下一步是查看文档中的组件，这些组件都是使用Tailwind CSS的实用类构建的。

你可以找到从警报、按钮和徽章一直到导航条、模态、下拉菜单，甚至是日期选择器的任何东西。

Flowbite - Tailwind CSS组件

以下是完整的组件列表。

  • 警报
  • 徽章
  • 面包屑
  • 按钮
  • 按钮组
  • 卡片
  • 下拉菜单
  • 表格
  • 列表组
  • 排版
  • 模态
  • 导航栏
  • 分页
  • 进度条
  • 表格
  • 工具提示
  • 数据采集器

你可以在主页上查看所有的组件，然后在文档的每一页上都可以看到。

你现在需要做的就是把你选择的元素复制粘贴到你的项目中，然后以你认为合适的方式使用它们。

让我们使用Flowbite的组件和Tailwind CSS的实用类创建一个用户认证页面，向你展示这个库的工作流程。

下面是它最后的样子。

用Flowbite建立的认证页面

如何用Flowbite建立一个用户认证页面

第一个要求是通过CDN或NPM将Flowbite纳入你要使用的HTML页面。我已经在这篇文章中向你展示了如何做到这一点，所以我假设你已经做到了。

让我们首先建立一个包装元素，随后我们将在其中添加标志和主卡元素。

<div class="mx-auto md:h-screen flex flex-col justify-center items-center px-6 pt-8 pt:mt-0">
    <!-- content will go here -->
</div>

包裹元素

这个元素可以确保所有内容在大屏幕上的水平和垂直方向上都居中。

现在让我们添加标识，这对品牌推广很有好处，用户也可以点击它回到主页。

<div class="mx-auto md:h-screen flex flex-col justify-center items-center px-6 pt-8 pt:mt-0">
    <a href="#" class="text-2xl font-semibold flex justify-center items-center mb-8 lg:mb-10">
      <img src="https://flowbite.com/application-ui/demo/images/logo.svg" class="h-11 mr-4" alt="FlowBite Logo">
      <span>Flowbite</span>
    </a>
</div>

包装元素内的标志

接下来我们应该创建主卡片元素，就在我们添加的标志之后，同时在卡片内添加图片。

<div class="bg-white shadow rounded-lg lg:flex items-center justify-center md:mt-0 w-full lg:max-w-screen-lg 2xl:max:max-w-screen-lg xl:p-0">
	<div class="hidden lg:flex w-2/3">
		<img class="rounded-l-lg" src="https://flowbite.com/application-ui/demo/images/authentication/login.jpg" alt="login image">
	</div>
	<div class="w-full p-6 sm:p-8 lg:p-16 lg:py-0 space-y-8">
		<!-- Authentication form goes here -->
	</div>
</div>

卡片元素

如果你的步骤正确，你应该有一个空的认证卡，里面有一张图片，上面有标志。

空的认证卡

如何使用Flowbite Tailwind的CSS表单元素

这就是Flowbite发挥作用的地方，因为我们需要建立一个表单元素，其中包括两个文本输入字段、一个复选框和一个按钮。我们不需要自己构建，因为我们可以使用Flowbite的Tailwind CSS表单元素。

让我们在卡片的第二个div 元素内添加以下标题和表单元素。

<h2 class="text-2xl lg:text-3xl font-bold text-gray-900">
   Sign in to platform
</h2>
<form class="mt-8 space-y-6" action="#">
   <div>
      <label for="email" class="text-sm font-medium text-gray-900 block mb-2">Your email</label>
      <input type="email" name="email" id="email"
         class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
         placeholder="name@company.com" required>
   </div>
   <div>
      <label for="password" class="text-sm font-medium text-gray-900 block mb-2">Your password</label>
      <input type="password" name="password" id="password" placeholder=""
         class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
         required>
   </div>
   <div class="flex items-start">
      <div class="flex items-center h-5">
         <input id="remember" aria-describedby="remember" name="remember" type="checkbox"
            class="bg-gray-50 border-gray-300 focus:ring-3 focus:ring-blue-300 h-4 w-4 rounded" required>
      </div>
      <div class="text-sm ml-3">
         <label for="remember" class="font-medium text-gray-900">Remember me</label>
      </div>
      <a href="#" class="text-sm text-blue-700 hover:underline ml-auto">Lost Password?</a>
   </div>
   <button type="submit"
      class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-base px-5 py-3 w-full sm:w-auto text-center">Login
   to your account</button>
   <div class="text-sm font-medium text-gray-500">
      Not registered? <a class="text-blue-700 hover:underline">Create account</a>
   </div>
</form>

认证表单元素

最后的结果应该是这样的。

用Flowbite和Tailwind CSS构建的认证页面

恭喜你！你已经用Flowbite和Tailwind CSS建立了你的第一个页面。你已经使用Tailwind CSS和Flowbite建立了你的第一个页面。想象一下，这将对你的项目有多大的帮助，不用再重复建立所有常用的网页组件了。

总结

我希望本教程能帮助你了解Flowbite是什么，以及你如何使用它来增强和加快你的Tailwind CSS开发流程。

在YouTube上有一个关于 试用Flowbite的视频，如果你想看一个有经验的开发者使用该库，你可以去看看。

对于那些想进一步升级他们的Tailwind CSS工具箱的人来说，还有一个Flowbite专业版，因为它包括一个Tailwind CSS Figma设计套件，你可以在实际编码之前用它来制作网站设计原型。

Flowbite Pro的预览

你还会收到很多有用的应用程序UI、营销UI和电子商务页面，可以帮助你更快地开始你的项目。你可以查看这个对比表，以更好地了解Flowbite开源版和专业版的区别。

avatar
文章
阅读
粉丝