如何使用TailwindCSS创建响应表单


在使用HTML和CSS时，建立网站的公认方法是在HTML文件中编写结构，并在CSS文件中实现样式。 但是，如果可以在HTML文件中使用类添加样式，该怎么办？ 碰巧的是，您可以，而这正是TailwindCSS的帮助。

引入TailwindCSS

根据TailwindCSS文档：

“ Tailwind CSS是一个高度可定制的，低级CSS框架，它为您提供了构建定制设计所需的所有构建基块，而没有任何烦人的，自以为是的样式需要覆盖。”

使用Tailwind CSS，您不必创建自己的样式。 您可以在标记内利用它提供的类来实现所需的自定义设计。 它还使您能够扩展这些样式。

简而言之，Tailwind是一个CSS框架，但不同于Bootstrap和Foundation。 它仅提供样式设置自己的网页所需的原始知识” – Adi Purdila

在本教程中，您将学习如何构建响应式表单，从而开始使用TailwindCSS。 您可以在GitHub上存储库 ，或在CodePen上进行演示 ：

1.开始使用NPM或Yarn

我们将使用几个工作流程来开始。 您可以选择喜欢的任何一个。 对于包管理器用户，首先要在终端中创建工作目录。

1
2
3
4
5
6
7
mkdir tutsplus-tailwindcss-form-demo && $_

## For NPM
npm init -y

## For Yarn
yarn init -y

这将创建一个目录并导航到该目录。 然后，使用默认设置（因此-y标志），根据您使用的对象初始化npm或yarn。

完成后，我们需要安装顺风车和其他两个软件包：autoprefixer和postcss-cli。

1
2
3
4
5
# Using npm
npm install tailwindcss autoprefixer postcss-cli

# Using Yarn
yarn add tailwindcss autoprefixer postcss-cli

接下来，在根目录中创建一个文件：

1
touch postcss.config.js

打开文件并添加以下配置代码段：

1
2
3
4
5
6
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

在这里，我们将TailwindCSS和autoprefixer添加为PostCSS插件。

要初始化Tailwind，我们将执行以下操作：

1
npx tailwind init

这将在项目的根目录下创建一个名为tailwind.config.js的配置文件：

1
2
3
4
5
6
7
module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

创建一个名为css的文件夹，并在其中创建一个名为tailwind.css的文件。 我们将使用@tailwind指令将某些样式注入CSS。

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

打开您的package.json并使脚本部分如下所示：

1
2
3
"scripts": {
    "build": "postcss css/tailwind.css -o public/build/tailwind.css"
  }

这样，我们可以运行npm run build来利用Tailwind CLI处理CSS。 处理后的样式将在public/build/tailwind.css文件中输出。 继续并运行命令以查看！

2.开始使用CodePen

如果您喜欢使用CodePen作为项目的开发环境，则设置过程非常简单。

转到CodePen并开始一支新笔。

根据CSS设置中选择Autoprefixer，并搜索在外部样式表tailwindcss：

嗯，就是这样。

3.设置索引文件

如果您正在使用包管理器进行开发（如前所述），则需要在创建的公共目录中添加一个名为index.html的文件。

1
2
3
4
5
6
7
8
9
10
11
12
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>TutsPlus TailwindCSS Form Demo</title>
  <link rel="stylesheet" href="/build/tailwind.css">
</head>
<body>
   
</body>
</html>

如果您继续使用CodePen，则无需使用它。 尽管您需要在HTML面板中放置标签。

在这两种情况下，我们都希望从准系统开始响应式表单并对其进行样式设置，因此起点将如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<div>
  <form>
    <div>
      <div>
        <div>
          <label for="company">
            Company Name*
          </label>
          <input id="company" type="text" placeholder="Tutsplus">
          <div>
            <span>
              Please fill out this field.
            </span>
          </div>
        </div>
        <div>
          <label for="title">
            Title*
          </label>
          <input id="title" type="text" placeholder="Software Engineer">
        </div>
      </div>
      <div>
        <div>
          <label for="application-link">
            Application Link*
          </label>
          <input id="application-link" type="text" placeholder="https://....">
        </div>
      </div>
      <div>
        <div>
          <label for="location">
            Location*
          </label>
          <div>
            <select id="location">
              <option>Abuja</option>
              <option>Enugu</option>
              <option>Lagos</option>
            </select>
          </div>
        </div>
        <div>
          <label for="job-type">
            Job Type*
          </label>
          <div>
            <select id="job-type">
              <option>Full-Time</option>
              <option>Part-Time</option>
              <option>Internship</option>
            </select>
          </div>
        </div>
        <div>
          <label for="department">
            Department*
          </label>
          <div>
            <select id="department">
              <option>Engineering</option>
              <option>Design</option>
              <option>Customer Support</option>
            </select>
          </div>
        </div>
      </div>
      <div>
        <div>
          <button>
            Button
          </button>
        </div>
      </div>
    </div>
  </form>
</div>

准系统标记将为您提供以下内容：

4.设置前三个输入字段的样式

这没什么好看的，因此让我们继续设计前三个输入字段的样式，以了解Tailwind CSS的工作原理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
  <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="company">
    Company Name*
  </label>
  <input class="w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3" id="company" type="text" placeholder="Netboard">
  <div>
      <span class="text-red-500 text-xs italic">
        Please fill out this field.
      </span>
  </div>
</div>
<div class="md:w-1/2 px-3">
  <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="title">
    Title*
  </label>
  <input class="w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3" id="title" type="text" placeholder="Software Engineer">
</div>
</div>
<div class="-mx-3 md:flex mb-6">
<div class="md:w-full px-3">
  <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="application-link">
    Application Link*
  </label>
  <input class="w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3" id="application-link" type="text" placeholder="http://....">
</div>
</div>

这似乎有点让人不知所措，因为我们已经以多种方式对事物进行了样式设置，但是很快我们将讨论所有内容。 结果看起来像这样：

请记住：我们应用了所有样式，而无需编写任何CSS代码！ 那我们到底做了什么？

样式标签

1
2
3
<label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="company">
    Company Name*
</label>

对于此标签：

  • 我们将text-transform样式设置为uppercase 。
  • 0.025em tracking-wide表示字母间距为0.025em而text-black给出的文字colour为#000 。
  • text-xs是font-size ，它等于.75rem ， font-bold是font-weight ，它是700 。
  • mb-2其中mb装置margin-bottom ，适用的底缘0.5rem 。

设置输入样式

我们正在对输入字段和div做类似的事情。

1
<input class="w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3" id="company" type="text" placeholder="Tutsplus">
  • w表示width ，添加的选项指定元素的宽度范围。 在这种情况下， w-full表示width为100% 。
  • bg用于应用背景样式； 在这里，我们将应用背景色#edf2f7 ，并添加文本颜色#000 。
  • 我们应用边框样式以及边框颜色#edf2f7 。
  • py-3使用0.75rem的padding-top和padding-bottom 。
  • 然后px-4 padding-right和padding-left 1rem 。

浏览文档 ，您可以看到每个类的适合程度。

5.设置其余元素的样式

在其他元素上添加一些类将使响应表单变得更加干净。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div class="-mx-3 md:flex mb-2">
  <div class="md:w-1/2 px-3 mb-6 md:mb-0">
    <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="location">
      Location*
    </label>
    <div>
      <select class="w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded" id="location">
        <option>Abuja</option>
        <option>Enugu</option>
        <option>Lagos</option>
      </select>
    </div>
  </div>
  <div class="md:w-1/2 px-3">
    <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="job-type">
      Job Type*
    </label>
    <div>
      <select class="w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded" id="job-type">
        <option>Full-Time</option>
        <option>Part-Time</option>
        <option>Internship</option>
      </select>
    </div>
  </div>
  <div class="md:w-1/2 px-3">
    <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="department">
      Department*
    </label>
    <div>
      <select class="w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded" id="department">
        <option>Engineering</option>
        <option>Design</option>
        <option>Customer Support</option>
      </select>
    </div>
  </div>
</div>
<div class="-mx-3 md:flex mt-2">
  <div class="md:w-full px-3">
    <button class="md:w-full bg-gray-900 text-white font-bold py-2 px-4 border-b-4 hover:border-b-2 border-gray-500 hover:border-gray-100 rounded-full">
      Button
    </button>
  </div>
</div>

表格传播到涵盖浏览器。 我们将约束包含的div，并利用SVG文件对背景进行样式设置以增加一点视觉效果。

为此，您需要在公共目录中创建一个名为assets的文件夹，并在其中创建另一个名为svg的文件夹。 然后创建一个名为architect.svg的文件并将其粘贴到其中。

1
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="199" viewBox="0 0 100 199"><g fill="#000"><path d="M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z"></path></g></svg>

正如我上面提到的，我们需要做的额外事情是为包含的div元素和body标签添加背景样式，填充和flex。 所以最后，这是我们HTML主体的外观：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<body class="bg-gray-100 flex bg-local" style="background: url('./assets/svg/architect.svg')">
  <div class="bg-gray-100 mx-auto max-w-6xl bg-white py-20 px-12 lg:px-24 shadow-xl mb-24">
    <form>
      <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
        <div class="-mx-3 md:flex mb-6">
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="company">
              Company Name*
            </label>
            <input class="w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3" id="company" type="text" placeholder="Netboard">
            <div>
              <span class="text-red-500 text-xs italic">
                Please fill out this field.
              </span>
            </div>
          </div>
          <div class="md:w-1/2 px-3">
            <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="title">
              Title*
            </label>
            <input class="w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3" id="title" type="text" placeholder="Software Engineer">
          </div>
        </div>
        <div class="-mx-3 md:flex mb-6">
          <div class="md:w-full px-3">
            <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="application-link">
              Application Link*
            </label>
            <input class="w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3" id="application-link" type="text" placeholder="http://....">
          </div>
        </div>
        <div class="-mx-3 md:flex mb-2">
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="location">
              Location*
            </label>
            <div>
              <select class="w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded" id="location">
                <option>Abuja</option>
                <option>Enugu</option>
                <option>Lagos</option>
              </select>
            </div>
          </div>
          <div class="md:w-1/2 px-3">
            <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="job-type">
              Job Type*
            </label>
            <div>
              <select class="w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded" id="job-type">
                <option>Full-Time</option>
                <option>Part-Time</option>
                <option>Internship</option>
              </select>
            </div>
          </div>
          <div class="md:w-1/2 px-3">
            <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="department">
              Department*
            </label>
            <div>
              <select class="w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded" id="department">
                <option>Engineering</option>
                <option>Design</option>
                <option>Customer Support</option>
              </select>
            </div>
          </div>
        </div>
        <div class="-mx-3 md:flex mt-2">
          <div class="md:w-full px-3">
            <button class="md:w-full bg-gray-900 text-white font-bold py-2 px-4 border-b-4 hover:border-b-2 border-gray-500 hover:border-gray-100 rounded-full">
              Button
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</body>

完成所有这些操作后，您应该得到这个结果！

下一步是什么？

在本教程中，您了解了创建响应式表单时TailwindCSS的功能。 我希望它可以帮助您了解以这种方式使用样式类的功能。

TailwindCSS由Adam Wathan和其他一些人积极维护。 我恳请您密切注意本文档，因为它是您使用TailwindCSS进行构建的第一资源。 我必须补充一点，亚当正在处理Tailwind组件 ，这些组件将很棒，请确保您已订阅。

如果您使用TailwindCSS构建了有趣的东西，或者想分享任何东西，我很乐意在评论部分中阅读它们。

了解有关TutwindCSS和Tuts +的更多信息

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-create-a-responsive-form-using-tailwindcss--cms-34128