使用 Tailwind CSS 構建響應式登陸頁面
了解如何使用流行的 CSS 框架 Tailwind CSS 構建美觀且響應靈敏的登陸頁面。本分步教程將教您需要了解的一切，從設置項目到添加內容和設計頁面樣式。您還將學習如何使用 Tailwind CSS 創建針對轉化進行優化的登陸頁面。
層疊樣式表 (CSS) 用於創建美觀的網站。CSS 是應用於網頁以使其看起來美觀的樣式規則。每當顯示網頁時，瀏覽器都會按照定義的 CSS 規則渲染網頁。
在構建大型網站或應用程序時，從頭開始編寫這些規則可能會變得乏味，因此多個 CSS 框架的可用性使這變得容易。它們帶有現有的預定義 CSS 規則，您只需將它們應用到您的網頁即可。一些流行的 CSS 框架的例子包括Bootstrap、Foundation、Bulma、Pure、Materialize等。
向 Tailwind CSS 打個招呼
Tailwind CSS是一個相對較新的 CSS 框架，它正在徹底改變遊戲規則。Tailwind 與上面列出的 CSS 框架不同，因為它沒有默認主題，也沒有內置的 UI 組件。Tailwind 是一個實用程序優先的 CSS 框架，用於快速構建自定義用戶界面。這意味著，如果您正在尋找一個帶有預先設計的小部件菜單的框架來構建您的網站，Tailwind 可能不是適合您的框架。相反，Tailwind 提供了高度可組合的低級實用程序類，可以輕鬆構建複雜的用戶界面，而無需鼓勵任何兩個站點看起來相同。
我們將要構建什麼
在本教程中，我們將構建一個簡單但美觀的登陸頁面，向客戶展示健康監測智能手錶 (HMSW) 產品。
我們的登陸頁面將分為以下幾個部分：
- 導航欄
- 英雄部分
- 特色部分
- 感言
- 呼籲採取行動
- 頁腳
您可以在此處下載該項目的資源。
入門
我們將首先創建一個新的項目目錄，我們將調用該目錄並在其中hmsw創建一個文件。index.html
$ mkdir hmsw && cd hmsw
$ touch index.html
為了快速啟動並運行 Tailwind CSS，我們將通過 CDN 獲取最新的默認配置構建。將下面的代碼片段添加到index.html：
<!-- index.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" />
</head>
<body class="text-gray-700 bg-white" style="font-family: 'Source Sans Pro', sans-serif">
</body>
</html>
我們給身體一個白色的背景。此外，我們從 Google 字體中提取了 sans pro 字體的源代碼。
使用 CDN 構建無法使用 Tailwind CSS 的許多功能。要充分利用 Tailwind CSS 功能，請通過 npm 安裝 Tailwind。
構建導航欄
導航欄將分為兩列：第一列將保存我們的徽標，第二列將保存我們的導航鏈接。緊接著粘貼以下代碼<body>：
<!-- index.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。對於單個鏈接，我們在兩側都填充了內容。為了指示活動鏈接（在我們的例子中為主頁鏈接），我們將文本設置為粗體。對於其餘鏈接，一旦鏈接懸停在上面，我們就會使用較深的灰色陰影。
構建英雄部分
英雄部分將顯示有關我們的智能健康監測手錶的信息和號召性用語按鈕，以便用戶立即採取行動。立即在導航欄之後添加代碼片段：
<!-- index.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>
這非常簡單，我們首先向頂部和底部添加填充，然後設置背景漸變。對於號召性用語按鈕，我們將其背景顏色設置為白色，將文本設置為粗體，為其添加一些填充，並通過為其提供全圓形邊框使其成為藥丸。最後，設置給它一些陰影，然後我們將文本設為大寫。
構建功能部分
緊接著英雄部分之後添加以下內容：
<!-- index.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 來構建網格。
建立推薦部分
這將包含我們一些用戶證言的卡片。該卡將包含用戶的證詞和用戶的姓名。因此，在功能部分之後立即添加以下內容：
<!-- index.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。對於單張卡片，我們給它一個白色的背景、圓形邊框和陰影。
建立號召性用語
需要號召性用語部分，以便我們的用戶在閱讀我們產品的功能以及演示用戶的推薦後可以立即採取行動。在推薦部分之後立即添加以下內容：
<!-- index.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>
構建頁腳
頁腳將包含額外的鏈接，例如博客、隱私政策、社交媒體等。在號召性用語部分之後立即添加以下內容：
<!-- index.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 -->
<!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 的更多信息，您可以閱讀其官方網站上的文檔。
感謝您的閱讀！
#tailwindcss #tailwind
1.05 GEEK