如何使用Tailwind CSS创建一个响应式表单

Tailwind CSS是最流行的框架之一，用于为网络应用程序构建自定义用户界面。它与其他CSS框架不同，因为它采用了实用性优先的方法。在构建网站时，我们在HTML文件中写出结构，然后在CSS文件中实现样式。

感谢新的CSS框架Tailwind，现在我们可以直接在HTML文件中添加样式。通过本教程，我们将使用Tailwind从头开始建立一个登录表单。

完成后，该表单将看起来像这样。

将Tailwind CSS添加到您的项目中

将Tailwind纳入你的项目有多种方法。最推荐的方法是使用一个软件包管理器，以便通过PostCSS使用构建工具充分利用配置的可能性。

让我们开始制作我们的表格吧!

设置我们的HTML页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Login Form</title>
    <link 
      rel="stylesheet" 
      href="./css/tailwind.css" />    
  </head>
</html>

在我们的代码段中，我们给我们的页面一个标题Login Form 。我们还添加了一个链接到我们的tailwind.css 文件。

现在添加<body> 标签，并键入以下类别。

 <body class="bg-gray-300" style="font-family:Georgia, 'Times New Roman', Times, serif;">

在上面的片段中，我们为我们的表格添加了背景颜色和字体。

接下来，添加一个<div> ，用以下的类来为页眉（logo）和表单设置样式。

<div class="h-screen flex items-center justify-center">

在<div> ，我们已经添加了类。

h-screen 将表单设置为100%的高度。
flex,items-center, 和justify-center 允许我们水平和垂直对齐我们的表单到中心。

添加表单的标题和标志

现在让我们添加我们的页眉和标志。

<form class="w-full md:w-1/3 bg-white rounded-lg items-center">
<div class="flex font-bold justify-center mt-6">
   <img class="h-24 w-24"
      src="./Images/avatar1.png">
</div>
<h2 class="text-3xl text-center text-gray-700 mb-4">Welcome Back!</h2>

在上面的片段中，form 容器包含了类。

w-full 将表单宽度设置为100%。
bg-white 将表单的背景设置为白色。
rounded-lg 设置表单的边缘为圆形。
md:w-1/3 设置最小宽度为33.333%。
items-center 将我们的表格排列在中心位置。

在<div> ，我们的标志设计如下。

flex 允许项目增长和缩减，从而防止溢出。
font-bold 将我们的标题设置为粗体。
justify-center 使标题和标志居中对齐。
mt-6 设置上边距为24px。

然后我们使用<img> 标签来添加和设计我们的标志。高度和宽度都被设置为94px (h-24,w-24)。

我们的页眉 "欢迎回来！"。

字体大小为30px，行高为36px。text 3x1
是居中对齐的 -text-center
颜色为灰色text-gray-700
底部有16px的边距mb-4

添加表单输入字段

让我们建立输入字段，并为它们设计样式

我们的代码将看起来像这样。

<div class="px-12 pb-10">
<div class="w-full mb-2">
   <div class="flex justify-center">
      <input type='text' placeholder="Username"
         class="px-8  w-full border rounded py-2 text-gray-700 focus:outline-none items-center" />
   </div>
</div>
<div class="w-full mb-2">
<div class="flex justify-center">   
   <input type='password' placeholder="Password"
      class="px-8 w-full border rounded py-2 text-gray-700 focus:outline-none" />
</div>

所以基本上，我们的输入字段（用户名和密码）有相同的样式。

所有项目都使用justify-center ，居中对齐，显示为flex。
文本是灰色的。(text-gray-400)。
宽度被设置为100% (w-full)，底边距为10px (mb-2)。
两个输入字段的边框都用border 设置为 1px 的宽度。
使用px-8 ，左右的padding被设置为32px，而上下的margin是8px-py-2 。
边框是圆的，边框半径用类rounded ，设置为4px。

输入字段已经完成了!

添加按钮

现在我们在底部添加一个按钮，让我们的用户可以登录

我们的代码应该如下所示。

<button type="submit"
   class="w-full mt-6 py-2  rounded bg-blue-500 text-gray-100  focus:outline-none ">Log In</button>

该按钮将有圆形的边框，使用类rounded-full 。
顶部和底部的padding为8px (py-2)。
它的上边距也是24px (mt-6)。
该按钮也有一个蓝色的背景颜色，由bg-blue-500 ，文字颜色为灰色。
全宽为100% (w-full)。
而且，没有轮廓焦点 (focus:outline-none)。

完成工作

最后，让我们通过为新用户和忘记密码的用户添加一个链接来完成我们的表单吧!

<a href="#" class="text-sm text-opacity-100 float-right mt-6 mb-4 hover:text-blue-600 underline">Forgot Password?</a>
<a href="#" class="text-sm text-opacity-100 float-left mt-6 mb-8 hover:text-blue-600 underline">Create Account</a>

这些链接在悬停时被设置为蓝色 (hover:text-blue-600)。
链接有下划线 (underline)，文字大小设置为小 (text-sm)。
两个顶部的边距都被设置为24pxmt-6 。

我们的表格已经完成了!

下面是我们的完整代码。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title> Login Form</title>
      <link 
         rel="stylesheet" 
         href="./css/tailwind.css" />
   </head>
   <body class="bg-gray-300" style="font-family:Roboto">
      <div class="px-12 pb-10">
         <div class="w-full mb-2">
            <div class="flex justify-center">
               <input type='text' placeholder="Username"
                  class="px-8  w-full border rounded py-2 text-gray-700 focus:outline-none items-center" />
            </div>
         </div>
         <div class="w-full mb-2">
            <div class="flex justify-center">   
               <input type='password' placeholder="Password"
                  class="px-8 w-full border rounded py-2 text-gray-700 focus:outline-none" />
            </div>
         </div>
         <div class="w-full mb-2 justify-center">
            <div class="flex items-center">   
               <input type='password' placeholder="Password"
                  class="px-8 w-full border rounded py-2 text-gray-700 focus:outline-none" />
            </div>
         </div>
         <button type="submit"
            class="w-full mt-6 py-2 rounded bg-blue-500 text-gray-100 focus:outline-none">Log In</button>
         <a href="#" class="text-sm text-opacity-100 float-right mt-6 mb-4 hover:text-blue-600 underline">Forgot Password?</a>
         <a href="#" class="text-sm text-opacity-100 float-left mt-6 mb-8 hover:text-blue-600 underline">Create Account</a>
      </div>
      </div>
   </body>
</html>

结论

登录表单是一个简单的例子，但由于它使用了许多关键的Tailwind类，因此达到了目的。希望本教程已经展示了使用Tailwind建立自定义组件是多么容易和快速。

如何使用Tailwind CSS创建一个响应式表格