如何使用TailwindCSS构建样式化的着陆页
来自菜鸟教程
介绍
开发人员使用级联样式表 (CSS) 来设置网站样式。 但通常，在构建大型网站或应用程序时，从头开始编写这些规则变得乏味。 这就是为什么有多个 CSS 框架可以帮助轻松编写 CSS 的原因，例如 Bootstrap、Foundation、Bulma、Pure、[ X157X]物化等
Tailwind CSS 是一个与前面提到的有些不同的框架，因为它没有默认主题，也没有内置的 UI 组件。 Tailwind 是一个实用程序优先的 CSS 框架，用于快速构建自定义用户界面。 这意味着，如果您正在寻找一个带有预设计小部件菜单的框架来构建您的网站，那么 Tailwind 可能不适合您。 相反，Tailwind 提供了高度可组合的低级实用程序类，可以更轻松地构建复杂的用户界面，而不会鼓励任何两个站点看起来相同。
在本教程中，您将构建一个登录页面，向客户展示智能健康监测手表 (SHMW) 产品。
最终产品将如下所示：
登陆页面将分为以下几部分：
- 导航栏
- 英雄专区
- 功能部分
- 感言
- 呼吁采取行动
- 页脚
您可以在此 GitHub 页面 下载此项目的 资产。
先决条件
对 CSS 有基本的了解可能会有所帮助，但不是必需的。
第 1 步 — 设置项目
我们将首先创建一个新的项目目录，我们将其命名为 shmw 并在其中创建一个 index.html 文件。
mkdir shmw cd shmw nano index.html
为了快速启动和运行 Tailwind CSS，我们将通过 CDN（内容交付网络）获取最新的默认配置构建。 将以下代码段添加到 index.html：
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Smart Health Monitoring Wristwatch</title>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="text-gray-700 bg-white" style="font-family: 'Source Sans Pro', sans-serif">
</body>
</html>
在此代码段中，您为正文设置了白色背景，并从 Google 字体中提取了 Source Sans Pro 字体。
注意： Tailwind CSS 的许多功能在 CDN 构建中不可用。 要充分利用 Tailwind CSS 功能，请通过 npm 安装 Tailwind。
第 2 步 - 构建导航栏
导航栏将分为两列。 第一列将包含徽标，第二列将包含导航链接。 在 index.html 文件中的 <body> 之后立即添加以下代码：
索引.html
<nav>
<div class="container mx-auto px-6 py-2 flex justify-between items-center">
<a class="font-bold text-2xl lg:text-4xl" href="#">
SHMW
</a>
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-800 hover:border-teal-500 appearance-none focus:outline-none">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<div class="hidden lg:block">
<ul class="inline-flex">
<li><a class="px-4 font-bold" href="/">Home</a></li>
<li><a class="px-4 hover:text-gray-800" href="#">About</a></li>
<li><a class="px-4 hover:text-gray-800" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
添加 .container 设置元素的 max-width 以匹配当前断点的 min-width。 要使容器居中，您添加 .mx-auto 和 .px-6 以在两侧（左侧和右侧）具有填充。 由于我们想要一个水平导航栏，我们将容器显示设置为 flex 并指定其项目应如何显示。 每个项目之间应该有相等的空间（使用 .justify-between），这会将两列都推到边缘。 它们将垂直居中（使用 .items-center）。 最后，我们使用 .py-2 为容器的顶部和底部添加填充。
第一列在导航栏上包含我们的企业徽标（在这种情况下，只是文本）。 对于第二列，我们希望链接在移动设备和桌面设备上以不同的方式显示。 我们有一个 div 包含一个用于移动菜单的按钮，该按钮仅在小屏幕设备上可见。 为了实现这一点，我们添加了 .block 和 .lg:hidden，这将使按钮在移动设备上可见并在大屏幕上隐藏。
注意： 默认情况下，Tailwind CSS 采用移动优先的方法，因此我们将其从小屏幕构建到大屏幕。
接下来，对于桌面链接，我们添加 .hidden 和 .lg:block，这与上面的直接相反。 对于实际链接，我们添加 .inline-flex 以使链接显示为水平。 对于单个链接，我们在两边都给它们填充。 为了指示活动链接（在我们的例子中，home 链接），我们将文本加粗。 对于其余的链接，一旦将链接悬停在上面，我们就会使用较深的灰色阴影。
第 3 步 - 构建英雄部分
英雄部分将显示有关我们的智能健康监测手表的信息和一个号召性用语按钮，供用户立即采取行动。 在导航栏之后立即添加此代码段：
索引.html
<div class="py-20" style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%)"
>
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold mb-2 text-white">
Smart Health Monitoring Wristwatch!
</h2>
<h3 class="text-2xl mb-8 text-gray-200">
Monitor your health vitals smartly anywhere you go.
</h3>
<button class="bg-white font-bold rounded-full py-4 px-8 shadow-lg uppercase tracking-wider">
Pre Order
</button>
</div>
</div>
我们首先在顶部和底部添加填充，然后设置背景渐变。 对于号召性用语按钮，我们给它一个白色的背景颜色，使文本加粗，给它一些填充，并通过给它完全圆角的边框使其呈药丸形状。 最后，我们给它一些阴影并使文本大写。
既然您已经制作了英雄部分，那么您就可以构建功能部分了。
第 4 步 - 构建功能部分
在此步骤中，您将构建一个部分，列出设备的显着功能。
在 hero 部分之后立即添加以下内容：
索引.html
<section class="container mx-auto px-6 p-10">
<h2 class="text-4xl font-bold text-center text-gray-800 mb-8">
Features
</h2>
<div class="flex items-center flex-wrap mb-20">
<div class="w-full md:w-1/2">
<h4 class="text-3xl text-gray-800 font-bold mb-3">Exercise Metric</h4>
<p class="text-gray-600 mb-8">Our Smart Health Monitoring Wristwatch is able to capture you vitals while you exercise. You can create different category of exercises and can track your vitals on the go.</p>
</div>
<div class="w-full md:w-1/2">
<img src="assets/health.svg" alt="Monitoring" />
</div>
</div>
<div class="flex items-center flex-wrap mb-20">
<div class="w-full md:w-1/2">
<img src="assets/report.svg" alt="Reporting" />
</div>
<div class="w-full md:w-1/2 pl-10">
<h4 class="text-3xl text-gray-800 font-bold mb-3">Reporting</h4>
<p class="text-gray-600 mb-8">Our Smart Health Monitoring Wristwatch can generate a comprehensive report on your vitals depending on your settings either daily, weekly, monthly, quarterly or yearly.</p>
</div>
</div>
<div class="flex items-center flex-wrap mb-20">
<div class="w-full md:w-1/2">
<h4 class="text-3xl text-gray-800 font-bold mb-3">Syncing</h4>
<p class="text-gray-600 mb-8">Our Smart Health Monitoring Wristwatch allows you to sync data across all your mobile devices whether iOS, Android or Windows OS and also to your laptop whether MacOS, GNU/Linux or Windows OS.</p>
</div>
<div class="w-full md:w-1/2">
<img src="assets/sync.svg" alt="Syncing" />
</div>
</div>
</section>
特征本身显示在两列的网格中：特征文本和随附的图像。 在移动设备上，我们彼此堆叠。 我们使用 flexbox 来构建我们的网格。
第 5 步 - 建立推荐部分
在此步骤中，您将构建将包含一些证言卡片的证言部分。 该卡将包含用户的证词和用户的姓名。
在功能部分之后立即添加以下内容：
索引.html
<section class="bg-gray-100">
<div class="container mx-auto px-6 py-20">
<h2 class="text-4xl font-bold text-center text-gray-800 mb-8">
Testimonials
</h2>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3 px-2 mb-4">
<div class="bg-white rounded shadow py-2">
<p class="text-gray-800 text-base px-6 mb-5">Monitoring and tracking my health vitals anywhere I go and on any platform I use has never been easier.</p>
<p class="text-gray-500 text-xs md:text-sm px-6">John Doe</p>
</div>
</div>
<div class="w-full md:w-1/3 px-2 mb-4">
<div class="bg-white rounded shadow py-2">
<p class="text-gray-800 text-base px-6 mb-5">As an Athlete, this is the perfect product for me. I wear my Smart Health Monitoring Wristwatch everywhere I go, even in the bathroom since it's waterproof.</p>
<p class="text-gray-500 text-xs md:text-sm px-6">Jane Doe</p>
</div>
</div>
<div class="w-full md:w-1/3 px-2 mb-4">
<div class="bg-white rounded shadow py-2">
<p class="text-gray-800 text-base px-6 mb-5">I don't regret buying this wearble gadget. One of the best gadgets I own!.</p>
<p class="text-gray-500 text-xs md:text-sm px-6">James Doe</p>
</div>
</div>
</div>
</div>
</section>
首先，我们为该部分提供背景并将其置于页面中心。 对于实际的证词，我们使用 flexbox 使它们出现在网格中。 当在移动设备上查看时，我们希望它们彼此堆叠（即占据屏幕的整个宽度），因此是 .w-full。 然后，在更大的屏幕上，我们希望它们使用 .md:w-1/3 显示在三列中。 对于单独的卡片，我们提供白色背景、圆角边框和阴影。
第 6 步——建立行动号召
需要行动号召部分，以便我们的用户在阅读我们产品的功能和演示用户的推荐后立即采取行动。 在推荐部分之后立即添加以下内容：
索引.html
<section style="background-color: #667eea">
<div class="container mx-auto px-6 text-center py-20">
<h2 class="mb-6 text-4xl font-bold text-center text-white">
Limited in Stock
</h2>
<h3 class="my-4 text-2xl text-white">
Get yourself the Smart Health Monitoring Wristwatch!
</h3>
<button
class="bg-white font-bold rounded-full mt-6 py-4 px-8 shadow-lg uppercase tracking-wider"
>
Pre Order
</button>
</div>
</section>
既然您已经创建了号召性用语，您就可以构建页脚了。
第 7 步 - 构建页脚
页脚将包含额外的链接，如博客、隐私政策、社交媒体等。 在号召性用语部分之后立即添加以下内容：
索引.html
<footer class="bg-gray-100">
<div class="container mx-auto px-6 pt-10 pb-6">
<div class="flex flex-wrap">
<div class="w-full md:w-1/4 text-center md:text-left">
<h5 class="uppercase mb-6 font-bold">Links</h5>
<ul class="mb-4">
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">FAQ</a>
</li>
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Help</a>
</li>
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Support</a>
</li>
</ul>
</div>
<div class="w-full md:w-1/4 text-center md:text-left">
<h5 class="uppercase mb-6 font-bold">Legal</h5>
<ul class="mb-4">
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Terms</a>
</li>
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Privacy</a>
</li>
</ul>
</div>
<div class="w-full md:w-1/4 text-center md:text-left">
<h5 class="uppercase mb-6 font-bold">Social</h5>
<ul class="mb-4">
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Facebook</a>
</li>
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Linkedin</a>
</li>
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Twitter</a>
</li>
</ul>
</div>
<div class="w-full md:w-1/4 text-center md:text-left">
<h5 class="uppercase mb-6 font-bold">Company</h5>
<ul class="mb-4">
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Official Blog</a>
</li>
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">About Us</a>
</li>
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
此代码在四列网格中显示一堆链接。 每一列将相互堆叠，在小屏幕上查看时文本将居中。
这样，您就完成了登录页面。 完成的 index.html 文件将如下所示：
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Smart Health Monitoring Wristwatch</title>
<link
rel="stylesheet"
href="https://unpkg.com/tailwindcss@next/dist/tailwind.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700"
rel="stylesheet"
/>
</head>
<body
class="text-gray-700 bg-white"
style="font-family: 'Source Sans Pro', sans-serif"
>
<!--Nav-->
<nav>
<div
class="container mx-auto px-6 py-2 flex justify-between items-center"
>
<a
class="font-bold text-2xl lg:text-4xl"
href="#"
>
SHMW
</a>
<div class="block lg:hidden">
<button
class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-800 hover:border-teal-500 appearance-none focus:outline-none"
>
<svg
class="fill-current h-3 w-3"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<div class="hidden lg:block">
<ul class="inline-flex">
<li>
<a class="px-4 font-bold" href="/">Home</a>
</li>
<li>
<a class="px-4 hover:text-gray-800" href="#"
>About</a
>
</li>
<li>
<a class="px-4 hover:text-gray-800" href="#"
>Contact</a
>
</li>
</ul>
</div>
</div>
</nav>
<!--Hero-->
<div
class="py-20"
style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%)"
>
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold mb-2 text-white">
Smart Health Monitoring Wristwatch!
</h2>
<h3 class="text-2xl mb-8 text-gray-200">
Monitor your health vitals smartly anywhere you go.
</h3>
<button
class="bg-white font-bold rounded-full py-4 px-8 shadow-lg uppercase tracking-wider"
>
Pre Order
</button>
</div>
</div>
<!-- Features -->
<section class="container mx-auto px-6 p-10">
<h2 class="text-4xl font-bold text-center text-gray-800 mb-8">
Features
</h2>
<div class="flex items-center flex-wrap mb-20">
<div class="w-full md:w-1/2">
<h4 class="text-3xl text-gray-800 font-bold mb-3">
Exercise Metrics
</h4>
<p class="text-gray-600 mb-8">
Our Smart Health Monitoring Wristwatch is able to capture you vitals
while you exercise. You can create different category of exercises
and can track your vitals on the go.
</p>
</div>
<div class="w-full md:w-1/2">
<img src="assets/health.svg" alt="Monitoring" />
</div>
</div>
<div class="flex items-center flex-wrap mb-20">
<div class="w-full md:w-1/2">
<img src="assets/report.svg" alt="Reporting" />
</div>
<div class="w-full md:w-1/2 pl-10">
<h4 class="text-3xl text-gray-800 font-bold mb-3">
Reporting
</h4>
<p class="text-gray-600 mb-8">
Our Smart Health Monitoring Wristwatch can generate a comprehensive
report on your vitals depending on your settings either daily,
weekly, monthly, quarterly or yearly.
</p>
</div>
</div>
<div class="flex items-center flex-wrap mb-20">
<div class="w-full md:w-1/2">
<h4 class="text-3xl text-gray-800 font-bold mb-3">
Syncing
</h4>
<p class="text-gray-600 mb-8">
Our Smart Health Monitoring Wristwatch allows you to sync data
across all your mobile devices whether iOS, Android or Windows OS
and also to your laptop whether MacOS, GNU/Linux or Windows OS.
</p>
</div>
<div class="w-full md:w-1/2">
<img src="assets/sync.svg" alt="Syncing" />
</div>
</div>
</section>
<!-- Testimonials -->
<section class="bg-gray-100">
<div class="container mx-auto px-6 py-20">
<h2 class="text-4xl font-bold text-center text-gray-800 mb-8">
Testimonials
</h2>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3 px-2 mb-4">
<div class="bg-white rounded shadow py-2">
<p class="text-gray-800 text-base px-6 mb-5">
Monitoring and tracking my health vitals anywhere I go and on
any platform I use has never been easier.
</p>
<p class="text-gray-500 text-xs md:text-sm px-6">
John Doe
</p>
</div>
</div>
<div class="w-full md:w-1/3 px-2 mb-4">
<div class="bg-white rounded shadow py-2">
<p class="text-gray-800 text-base px-6 mb-5">
As an Athlete, this is the perfect product for me. I wear my
Smart Health Monitoring Wristwatch everywhere I go, even in the
bathroom since it's waterproof.
</p>
<p class="text-gray-500 text-xs md:text-sm px-6">
Jane Doe
</p>
</div>
</div>
<div class="w-full md:w-1/3 px-2 mb-4">
<div class="bg-white rounded shadow py-2">
<p class="text-gray-800 text-base px-6 mb-5">
I don't regret buying this wearble gadget. One of the best
gadgets I own!.
</p>
<p class="text-gray-500 text-xs md:text-sm px-6">
James Doe
</p>
</div>
</div>
</div>
</div>
</section>
<!--Call to Action-->
<section style="background-color: #667eea">
<div class="container mx-auto px-6 text-center py-20">
<h2 class="mb-6 text-4xl font-bold text-center text-white">
Limited in Stock
</h2>
<h3 class="my-4 text-2xl text-white">
Get yourself the Smart Health Monitoring Wristwatch!
</h3>
<button
class="bg-white font-bold rounded-full mt-6 py-4 px-8 shadow-lg uppercase tracking-wider"
>
Pre Order
</button>
</div>
</section>
<!--Footer-->
<footer class="bg-gray-100">
<div class="container mx-auto px-6 pt-10 pb-6">
<div class="flex flex-wrap">
<div class="w-full md:w-1/4 text-center md:text-left ">
<h5 class="uppercase mb-6 font-bold">Links</h5>
<ul class="mb-4">
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>FAQ</a
>
</li>
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Help</a
>
</li>
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Support</a
>
</li>
</ul>
</div>
<div class="w-full md:w-1/4 text-center md:text-left ">
<h5 class="uppercase mb-6 font-bold">Legal</h5>
<ul class="mb-4">
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Terms</a
>
</li>
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Privacy</a
>
</li>
</ul>
</div>
<div class="w-full md:w-1/4 text-center md:text-left ">
<h5 class="uppercase mb-6 font-bold">Social</h5>
<ul class="mb-4">
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Facebook</a
>
</li>
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Linkedin</a
>
</li>
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Twitter</a
>
</li>
</ul>
</div>
<div class="w-full md:w-1/4 text-center md:text-left ">
<h5 class="uppercase mb-6 font-bold">Company</h5>
<ul class="mb-4">
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Official Blog</a
>
</li>
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>About Us</a
>
</li>
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Contact</a
>
</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
结论
在本教程中，您使用 Tailwind CSS 构建了一个登录页面。 除了使用 Tailwind 提供的类之外，您还使用了渐变色来使登录页面更有深度。 要了解更多关于 Tailwind CSS 的信息，您可以阅读他们官方网站上的 文档。
