模版表单和响应表单区别
在使用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 +的更多信息
模版表单和响应表单区别