模版表单和响应表单区别_如何使用TailwindCSS创建响应表单

最新推荐文章于 2024-07-11 15:15:03 发布

daique1908

最新推荐文章于 2024-07-11 15:15:03 发布

阅读量679

点赞数

文章标签： java vue css html python ViewUI

本文介绍了如何使用TailwindCSS构建响应式表单，无需编写自定义CSS。通过NPM或Yarn设置工作流程，或直接在CodePen上开始，然后通过添加特定的TailwindCSS类来样式化表单元素。文章详细展示了设置样式的过程，并提供了最终结果的视觉展示。

摘要由CSDN通过智能技术生成

模版表单和响应表单区别

在使用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

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

mkdir tutsplus-tailwindcss-form-demo && $_

## For NPM
npm init -y

## For Yarn
yarn init -y

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

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

# Using npm
npm install tailwindcss autoprefixer postcss-cli

# Using Yarn
yarn add tailwindcss autoprefixer postcss-cli

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

touch postcss.config.js

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

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

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

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

npx tailwind init

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

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

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

@tailwind base;
@tailwind components;
@tailwind utilities;

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

"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的文件。

<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面板中放置<body>标签。

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

<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的工作原理。

<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代码！那我们到底做了什么？

样式标签

<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进行类似的操作。

<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.设置其余元素的样式

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

<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的文件并将其粘贴到其中。

<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主体的外观：

<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

模版表单和响应表单区别

daique1908

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
模版表单和响应表单区别_如何使用TailwindCSS创建响应表单

在使用HTML和CSS时，建立网站的公认方法是在HTML文件中编写结构，并在CSS文件中实现样式。但是，如果可以在HTML文件中使用类添加样式，该怎么办？碰巧的是，您可以，而这正是TailwindCSS的帮助。引入TailwindCSS 根据TailwindCSS文档： “ Tailwind CSS是一个高度可定制的，低级CSS框架，它为您提供了构建定制设计所需的所有构建基块，而...
复制链接

扫一扫