案例:Landing Page — 從零打造行銷落地頁 | TailwindCSS 完整教學
前面四十二篇的 utility、flex、grid、響應式與暗色模式,終於要在這一篇合體了。我們會從一張白紙開始,用 TailwindCSS v4 逐段打造一個完整的行銷 Landing Page——Navbar、Hero、特色區、社會證明、定價卡、FAQ 到 Footer,每一段都給你可以直接複製貼上就跑的 HTML,並解說背後的版面思路。做完你會得到一個響應式、支援深色模式、可以直接上線的作品。
前言
Landing Page(行銷落地頁)是幾乎所有產品、服務、活動的門面。它的任務很單純:在一個捲軸之內,把「這是什麼、為什麼你需要、現在就行動」講清楚,並把訪客導向一個明確的動作(CTA,Call To Action)。這種頁面剛好是 TailwindCSS 最擅長的場域——版面固定、元件重複、要快速微調視覺,utility-first 的寫法能讓你在瀏覽器裡邊看邊調,幾乎不用來回切 CSS 檔。
這一篇是本系列實戰案例的第一課。我們不再一個一個介紹 utility,而是反過來——把前面學過的東西,全部拿出來蓋一棟房子。你會清楚看到 flex 怎麼撐起 Navbar 的左右分佈、grid 怎麼排出等寬的特色卡與定價卡、sm: md: lg: 這些斷點前綴怎麼讓同一份標記在手機與桌機各自漂亮、dark: 前綴怎麼讓整頁一鍵切換深淺色。這些觀念你都學過了,這篇要做的是把它們串成一個真實作品。
為什麼要特別挑 Landing Page 當第一個實戰?因為它在「難度」與「實用度」之間取得了絕佳平衡。它不像後台儀表板需要處理複雜的狀態與資料互動,也不像電商產品頁得串接一堆商業邏輯——它幾乎是純視覺、純版面的挑戰,恰好逼你把 Tailwind 的排版能力練到滾瓜爛熟。同時它又是實務上出現頻率最高的頁面:每一次產品發表、每一檔行銷活動、每一個 side project 上線,都需要一張能打的落地頁。把這一課練熟,你手上就多了一個能在半天內獨立交付的即戰力技能。
成品是一個典型的 SaaS 產品行銷頁,由上而下依序是:固定在頂部的 Navbar、佔滿首屏的 Hero(大標題 + 主次 CTA + 社會證明)、三欄的特色區(Features Grid)、三欄的定價卡(Pricing)、原生手風琴的 FAQ,最後收在 Footer。整頁完全響應式,並且在深色模式下也經過調校。
本系列以 TailwindCSS v4 為預設版本,範例皆以 v4 語法示範。凡涉及 v3 差異之處,我會特別標註。
本篇你將學到:
- 版面拆解思維:拿到一張設計稿,如何把它切成區塊,並判斷每塊該用
flex還是grid - 逐段實作:Navbar → Hero → Features → Pricing → FAQ → Footer,每段一個可執行的 HTML+Tailwind 區塊
- 響應式與暗色模式:如何用行動優先的思維鋪斷點,以及讓整頁在深色模式下維持對比與美感
- 行銷頁的坑:RWD 擁擠、對比不足、CTA 埋沒等常見錯誤,以及對應的正確做法
版面拆解
動手寫 class 之前,先在腦中(或紙上)把整頁拆塊。一個 Landing Page 大致長這樣:
┌─────────────────────────────────────────────┐
│ [LOGO] 功能 定價 FAQ 登入 [免費開始]│ ← Navbar(flex 左右分佈)
├─────────────────────────────────────────────┤
│ │
│ 打造更好的產品體驗 │ ← Hero(flex 垂直置中)
│ 副標題說明文字 │
│ [免費開始] [觀看示範] │
│ ★★★★★ 10,000+ 用戶信賴 │
├─────────────────────────────────────────────┤
│ [icon] 特色一 [icon] 特色二 [icon] 特色三 │ ← Features(grid 3 欄)
├─────────────────────────────────────────────┤
│ 免費版 專業版◉ 企業版 │ ← Pricing(grid 3 欄)
├─────────────────────────────────────────────┤
│ Q: 常見問題一 [+] │ ← FAQ(details 手風琴)
│ Q: 常見問題二 [+] │
├─────────────────────────────────────────────┤
│ [LOGO] 產品 關於 定價 部落格 © 2026 │ ← Footer(grid 多欄)
└─────────────────────────────────────────────┘
拆完之後,最關鍵的一步是替每一塊選對佈局工具。原則很簡單:一維排列用 flex,二維網格用 grid。
- Navbar:左邊 Logo、右邊選單與按鈕,是典型的「一列、左右兩端」——用
flex搭justify-between最順。 - Hero:內容置中、垂直堆疊,用
flex的items-center justify-center把整塊釘在畫面中央。 - Features / Pricing / Footer:這三塊都是「多張等寬卡片並排,手機要換行」的規則網格——這正是
grid加grid-cols-*的主場,響應式換欄只要改md:grid-cols-2 lg:grid-cols-3。 - FAQ:垂直堆疊的一問一答,用最單純的
space-y-*垂直間距即可,展開收合則交給原生<details>。
另外先定好兩條全域規則,後面每一段都會用到:
- 容器寬度:內容區一律包在
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8裡——限制最大寬度、水平置中、兩側留白隨螢幕放大。這是本篇會不斷重複的「外殼」。 - 深色底色交替:相鄰區塊的底色深淺交替,視覺上才有分層。我們讓 Hero 用白底(
bg-white dark:bg-gray-950)、Features 用淺灰(bg-gray-50 dark:bg-gray-900)、Pricing 再回白、FAQ 再淺灰,一深一淺區隔各區。
還有一個容易被忽略卻很關鍵的觀念:間距的節奏感。一個好看的 Landing Page,各區塊之間的上下留白要夠大且一致——我們統一讓每個內容區用 py-24 的垂直內距,讓區塊之間有充分的「呼吸空間」。行銷頁最忌諱把資訊塞得密密麻麻,適度的留白反而能讓訪客的視線聚焦在重點(尤其是 CTA)上。這種「留白即設計」的思維,在 Tailwind 裡只是幾個間距 utility 的事,但它對成品的質感影響極大,值得你在動手前就放在心上。
心裡有了這張地圖——區塊怎麼切、各塊用 flex 還是 grid、共用外殼長怎樣、底色如何交替、間距如何統一——接下來逐段填肉就很輕鬆了。這也是我建議你養成的習慣:先想清楚結構,再開始寫 class,而不是邊寫邊亂加,最後被一堆難以維護的 utility 淹沒。
逐段實作
以下每一段都是可獨立執行的 HTML 片段。你可以把它們依序貼進一個掛了 Tailwind v4 的頁面(v4 只需在 CSS 裡寫一行 @import "tailwindcss";),由上而下拼成完整的 Landing Page。
Navbar:固定頂部、flex 左右分佈
Navbar 用 fixed top-0 inset-x-0 釘在畫面頂端,z-50 確保它疊在所有內容之上。內層用 flex items-center justify-between 讓 Logo 靠左、選單與 CTA 靠右。桌機顯示完整選單(hidden lg:flex),手機則收成漢堡按鈕(lg:hidden)。
<!-- Navbar:固定頂部,flex 撐開左右兩端 -->
<header class="fixed top-0 inset-x-0 z-50 bg-white/80 dark:bg-gray-950/80
backdrop-blur border-b border-gray-100 dark:border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 lg:h-20">
<!-- Logo(靠左)-->
<a href="/" class="flex items-center gap-2 shrink-0">
<div class="w-8 h-8 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600"></div>
<span class="text-xl font-bold text-gray-900 dark:text-white">ProductName</span>
</a>
<!-- 桌機選單(靠右,手機隱藏)-->
<nav class="hidden lg:flex items-center gap-8">
<a href="#features" class="text-sm font-medium text-gray-600 hover:text-gray-900
dark:text-gray-400 dark:hover:text-white transition-colors">功能特點</a>
<a href="#pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900
dark:text-gray-400 dark:hover:text-white transition-colors">定價方案</a>
<a href="#faq" class="text-sm font-medium text-gray-600 hover:text-gray-900
dark:text-gray-400 dark:hover:text-white transition-colors">常見問題</a>
</nav>
<!-- 桌機 CTA -->
<div class="hidden lg:flex items-center gap-3">
<a href="/login" class="text-sm font-medium text-gray-700 dark:text-gray-300
hover:text-gray-900 dark:hover:text-white transition-colors">登入</a>
<a href="/signup" class="px-4 py-2 rounded-xl text-sm font-semibold
bg-gray-900 dark:bg-white text-white dark:text-gray-900
hover:bg-gray-700 dark:hover:bg-gray-100 transition-colors">免費開始</a>
</div>
<!-- 手機漢堡按鈕(桌機隱藏)-->
<button class="lg:hidden p-2 rounded-lg text-gray-600 dark:text-gray-400
hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" aria-label="開啟選單">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
</header>
這裡幾個值得留意的點:bg-white/80 ... backdrop-blur 讓 Navbar 帶點半透明毛玻璃感,捲動時底下的內容會微微透出來,是現代行銷頁很流行的質感。hidden lg:flex 與 lg:hidden 是一對——同一組連結在桌機用完整導覽、在手機收進漢堡選單,靠斷點前綴切換顯示,不需要寫兩份 HTML。漢堡選單的展開收合是本頁少數需要幾行 JavaScript 的地方,這裡先把按鈕放好即可。
另外提醒一個 fixed 定位的連帶效應:因為 Navbar 被抽離了正常文件流,固定在畫面頂端,它下方的第一個區塊(也就是 Hero)如果不預留空間,內容就會被 Navbar 蓋住。這就是為什麼下一段 Hero 會加上 pt-20——h-16 lg:h-20 的 Navbar 高度,需要用 Hero 的頂部內距補回來。這是幾乎每個有固定 Navbar 的頁面都會遇到的小陷阱,先在這裡點出來,你之後自己做的時候就不會納悶「為什麼標題被切掉一半」。
Hero:首屏主張、flex 垂直置中
Hero 是整頁最重要的區塊,承載主標題、副標題與主要 CTA。用 min-h-screen 讓它佔滿首屏、flex items-center justify-center 把內容釘在正中央,pt-20 則是為固定 Navbar 預留高度,避免內容被壓在 Navbar 底下。主標題用漸層文字(bg-clip-text text-transparent)製造焦點,CTA 分主次兩顆,建立清楚的視覺層級。
<!-- Hero:佔滿首屏,flex 垂直水平置中 -->
<section class="relative min-h-screen flex items-center justify-center
bg-white dark:bg-gray-950 pt-20 overflow-hidden">
<div class="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<!-- 頂部徽章 -->
<div class="inline-flex items-center gap-2 px-4 py-2 mb-8 rounded-full
border border-gray-200 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-400">
<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
v2.0 正式發布
</div>
<!-- 主標題(字級隨螢幕成長 + 漸層文字)-->
<h1 class="text-4xl sm:text-5xl lg:text-7xl font-extrabold tracking-tight mb-6">
<span class="text-gray-900 dark:text-white">打造更好的</span><br />
<span class="bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500
bg-clip-text text-transparent">產品體驗</span>
</h1>
<!-- 副標題 -->
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto leading-relaxed mb-10">
我們的平台幫助團隊更快地建構、測試與迭代,從概念到上線只需幾分鐘,而非數週。
</p>
<!-- CTA:主(實心)+ 次(外框),手機全寬堆疊 -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-14">
<a href="/signup"
class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 rounded-2xl
text-base font-semibold bg-gray-900 dark:bg-white text-white dark:text-gray-900
shadow-lg hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200">
免費開始使用
</a>
<button class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 rounded-2xl
text-base font-semibold border-2 border-gray-200 dark:border-gray-700
text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900
transition-all duration-200">
觀看示範(2 分鐘)
</button>
</div>
<!-- 社會證明:頭像疊加 + 評分 -->
<div class="flex flex-col items-center gap-3">
<div class="flex -space-x-2">
<div class="w-9 h-9 rounded-full border-2 border-white bg-cyan-500 text-white text-xs font-bold flex items-center justify-center">張</div>
<div class="w-9 h-9 rounded-full border-2 border-white bg-blue-500 text-white text-xs font-bold flex items-center justify-center">李</div>
<div class="w-9 h-9 rounded-full border-2 border-white bg-indigo-500 text-white text-xs font-bold flex items-center justify-center">王</div>
<div class="w-9 h-9 rounded-full border-2 border-white bg-gray-800 text-white text-xs font-bold flex items-center justify-center">+10k</div>
</div>
<div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
<span class="text-amber-400">★★★★★</span>
<span class="font-medium text-gray-900 dark:text-white">4.9/5</span>
<span>來自 10,000+ 位用戶評價</span>
</div>
</div>
</div>
</section>
Hero 裡有三個關鍵手法。第一是字級的響應式成長:text-4xl sm:text-5xl lg:text-7xl,手機用 text-4xl 避免大標題破碎換行,桌機才放到 text-7xl 的氣勢。第二是 CTA 的主次分層:主 CTA 是實心高對比,次 CTA 只有外框,兩顆一比,視線自然被主 CTA 吸走;而 flex-col sm:flex-row 讓它們在手機垂直堆疊、桌機水平並排。第三是社會證明——用 -space-x-2 讓頭像互相重疊,製造「一群人都在用」的緊湊感,是提升信任的經典小技巧。
Features:三欄特色、grid 排版與 group hover
特色區是「多張等寬卡片並排」的典型網格,交給 grid。手機單欄(grid-cols-1)、平板兩欄(md:grid-cols-2)、桌機三欄(lg:grid-cols-3),換欄只是改前綴數字。每張卡用 group 讓整張卡可 hover,滑鼠移上去時圖示與邊框一起變化。
<!-- Features:grid 三欄,響應式換欄 -->
<section id="features" class="py-24 bg-gray-50 dark:bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- 區塊標題 -->
<div class="text-center mb-16">
<p class="text-sm font-semibold text-cyan-600 dark:text-cyan-400 uppercase tracking-wider mb-3">功能特點</p>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">一切你所需要的工具</h2>
<p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">從設計到部署,涵蓋整個產品開發週期。</p>
</div>
<!-- 特色卡片網格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
<!-- 卡片一(group 讓整張卡可 hover)-->
<div class="group bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700
hover:border-cyan-300 dark:hover:border-cyan-700 hover:shadow-lg transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-cyan-100 dark:bg-cyan-900/30 flex items-center justify-center mb-5
group-hover:bg-cyan-600 transition-colors duration-300">
<svg class="w-6 h-6 text-cyan-600 dark:text-cyan-400 group-hover:text-white transition-colors"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">閃電級效能</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
優化每一毫秒的回應時間,確保用戶獲得最流暢的體驗。
</p>
</div>
<!-- 卡片二 -->
<div class="group bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700
hover:border-green-300 dark:hover:border-green-700 hover:shadow-lg transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-green-100 dark:bg-green-900/30 flex items-center justify-center mb-5
group-hover:bg-green-600 transition-colors duration-300">
<svg class="w-6 h-6 text-green-600 dark:text-green-400 group-hover:text-white transition-colors"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">企業級安全</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
端對端加密與即時威脅偵測,讓資料永遠安全。
</p>
</div>
<!-- 卡片三 -->
<div class="group bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700
hover:border-indigo-300 dark:hover:border-indigo-700 hover:shadow-lg transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center mb-5
group-hover:bg-indigo-600 transition-colors duration-300">
<svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400 group-hover:text-white transition-colors"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">即時協作</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
團隊可同時編輯同一份文件,變更即時同步。
</p>
</div>
</div>
</div>
</section>
這段的靈魂是 group 與 group-hover:。我們把 group 掛在最外層卡片上,內層的圖示背景 group-hover:bg-cyan-600、圖示顏色 group-hover:text-white 就會在滑鼠移到整張卡片(而非只是圖示本身)時一起變化,製造「整張卡都在回應你」的一致互動感。這是純 CSS 就能做到的細膩效果,不需要 JavaScript。若沒有 group,你只能讓「圖示 hover 時圖示自己變色」,但很難做到「hover 卡片任何位置、圖示就跟著變」——group 正是為了這種「父層被 hover、子層跟著反應」的場景而生。
另外注意 grid-cols-1 md:grid-cols-2 lg:grid-cols-3——這一行就完成了三個尺寸的欄數切換,這正是 grid 在規則網格上的威力。搭配 gap-6 lg:gap-8,卡片之間的間距也會隨螢幕微調,桌機給大一點的呼吸空間。你會發現整個特色區的響應式,幾乎全靠這一兩行 grid 相關的 class 就搞定了,完全不需要寫媒體查詢——這就是 utility-first 在版面上最爽的地方。至於區塊標題上方那行小小的 uppercase tracking-wider 大寫標籤(「功能特點」),則是行銷頁常見的「eyebrow 眉標」設計,用來引導視線、預告下方主標,是個簡單但很提升質感的細節。
Pricing:三欄定價、突出推薦方案
定價卡同樣是 grid 三欄,但重點在讓中間的推薦方案脫穎而出。我們給推薦卡加上實心深色底、彩色邊框、更強的陰影,並用 lg:scale-105 在桌機把它稍微放大,再貼一個「最受歡迎」的徽章。items-start 讓等高對齊失效,配合 scale 才不會把旁邊的卡也撐高。
<!-- Pricing:grid 三欄,中間卡片視覺突出 -->
<section id="pricing" class="py-24 bg-white dark:bg-gray-950">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<p class="text-sm font-semibold text-cyan-600 dark:text-cyan-400 uppercase tracking-wider mb-3">定價方案</p>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white">簡單透明的定價</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 items-start">
<!-- 免費版(次要樣式)-->
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 border border-gray-200 dark:border-gray-800">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">免費版</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">適合個人與小型專案</p>
<div class="flex items-baseline gap-1 mb-6">
<span class="text-4xl font-bold text-gray-900 dark:text-white">$0</span>
<span class="text-gray-500 dark:text-gray-400">/月</span>
</div>
<ul class="space-y-3 mb-8 text-sm text-gray-600 dark:text-gray-400">
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-green-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
最多 3 個專案</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-green-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
5GB 儲存空間</li>
</ul>
<a href="/signup" class="block text-center px-6 py-3 rounded-xl text-sm font-semibold
border-2 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300
hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">免費開始使用</a>
</div>
<!-- 專業版(推薦,視覺突出 + 徽章 + 放大)-->
<div class="relative bg-gray-900 dark:bg-blue-950 rounded-2xl p-8 border-2 border-cyan-500
shadow-2xl shadow-cyan-500/20 lg:scale-105">
<div class="absolute -top-4 left-1/2 -translate-x-1/2">
<span class="px-4 py-1.5 rounded-full bg-cyan-500 text-white text-xs font-bold shadow-lg">最受歡迎</span>
</div>
<h3 class="text-lg font-semibold text-white mb-2">專業版</h3>
<p class="text-sm text-gray-400 mb-6">適合成長中的團隊</p>
<div class="flex items-baseline gap-1 mb-6">
<span class="text-4xl font-bold text-white">$29</span>
<span class="text-gray-400">/月/人</span>
</div>
<ul class="space-y-3 mb-8 text-sm text-gray-300">
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-cyan-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
無限專案</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-cyan-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
100GB 儲存空間</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-cyan-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
優先客服支援</li>
</ul>
<a href="/signup?plan=pro" class="block text-center px-6 py-3 rounded-xl text-sm font-semibold
bg-cyan-500 text-white hover:bg-cyan-400 transition-colors shadow-lg">立即升級</a>
</div>
<!-- 企業版(次要樣式)-->
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 border border-gray-200 dark:border-gray-800">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">企業版</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">為大型組織量身定制</p>
<div class="flex items-baseline gap-1 mb-6">
<span class="text-4xl font-bold text-gray-900 dark:text-white">客製</span>
</div>
<ul class="space-y-3 mb-8 text-sm text-gray-600 dark:text-gray-400">
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-green-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
所有專業版功能</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-green-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
自訂 SSO 整合</li>
</ul>
<a href="/contact" class="block text-center px-6 py-3 rounded-xl text-sm font-semibold
border-2 border-gray-900 dark:border-white text-gray-900 dark:text-white
hover:bg-gray-900 hover:text-white dark:hover:bg-white dark:hover:text-gray-900
transition-all">聯絡銷售團隊</a>
</div>
</div>
</div>
</section>
定價卡的設計心法就一句:讓你想賣的那個方案最搶眼。這裡靠三招疊加——bg-gray-900 的深色實心底(在一片白卡中一眼跳出)、border-2 border-cyan-500 的品牌色邊框、lg:scale-105 的放大,再加上絕對定位的「最受歡迎」徽章。注意徽章用 absolute -top-4 left-1/2 -translate-x-1/2 精準釘在卡片上緣正中央,這是絕對定位置中的標準寫法。至於外層 grid 上的 items-start,是為了讓被 scale 放大的卡片不去撐高左右兩張卡,維持頂端對齊。
FAQ:原生 details 手風琴,零 JavaScript
FAQ 是本頁最能展現「純 CSS 也能做互動」的一段。我們不寫任何 JavaScript,直接用 HTML 原生的 <details> 與 <summary>——瀏覽器內建點擊展開收合。再用 Tailwind 的 group-open: 前綴,讓展開時「+」圖示旋轉成「×」。內容區用 max-w-3xl 收窄,閱讀起來更聚焦。
<!-- FAQ:原生 details 手風琴,不需 JavaScript -->
<section id="faq" class="py-24 bg-gray-50 dark:bg-gray-900">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-white">常見問題</h2>
</div>
<div class="space-y-3">
<!-- 每個 details 就是一則可展開的問答 -->
<details class="group bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
<summary class="flex items-center justify-between gap-4 p-6 cursor-pointer font-medium
text-gray-900 dark:text-white list-none [&::-webkit-details-marker]:hidden">
<span>如何開始使用?</span>
<!-- group-open: 展開時圖示旋轉 45 度,+ 變 × -->
<svg class="w-5 h-5 text-gray-500 shrink-0 transition-transform duration-300 group-open:rotate-45"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
</svg>
</summary>
<div class="px-6 pb-6 text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
註冊免費帳號即可在 5 分鐘內完成設定,提供互動式教學,無需信用卡即可開始試用。
</div>
</details>
<details class="group bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
<summary class="flex items-center justify-between gap-4 p-6 cursor-pointer font-medium
text-gray-900 dark:text-white list-none [&::-webkit-details-marker]:hidden">
<span>可以隨時取消訂閱嗎?</span>
<svg class="w-5 h-5 text-gray-500 shrink-0 transition-transform duration-300 group-open:rotate-45"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
</svg>
</summary>
<div class="px-6 pb-6 text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
可以隨時取消,取消後仍可使用到當期結束,並提供 30 天無條件退款保障。
</div>
</details>
</div>
</div>
</section>
這段有兩個 Tailwind 巧思。第一是 list-none [&::-webkit-details-marker]:hidden——<summary> 預設會有一個小三角箭頭,這兩個 class(後者是任意變體 arbitrary variant,直接寫進 CSS 選擇器)把它藏起來,換成我們自己的「+」圖示。第二是 group-open:rotate-45:<details> 展開時瀏覽器會自動加上 open 屬性,group-open: 就能偵測到這個狀態,讓圖示旋轉 45 度,把「+」變成「×」——整個展開收合互動,一行 JavaScript 都沒寫。
Footer:grid 多欄,收尾與導覽
最後是 Footer,通常是 Logo/簡介 + 幾欄連結。用 grid 排,手機單欄堆疊、桌機四欄。底部再放一條版權列。
<!-- Footer:grid 多欄連結 -->
<footer class="bg-gray-900 dark:bg-gray-950 text-gray-400">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<!-- 品牌欄(手機佔滿兩欄)-->
<div class="col-span-2 md:col-span-1">
<div class="flex items-center gap-2 mb-4">
<div class="w-8 h-8 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600"></div>
<span class="text-lg font-bold text-white">ProductName</span>
</div>
<p class="text-sm leading-relaxed">讓團隊更快從概念走到上線。</p>
</div>
<!-- 連結欄 -->
<div>
<h4 class="text-sm font-semibold text-white mb-4">產品</h4>
<ul class="space-y-2 text-sm">
<li><a href="#features" class="hover:text-white transition-colors">功能特點</a></li>
<li><a href="#pricing" class="hover:text-white transition-colors">定價方案</a></li>
</ul>
</div>
<div>
<h4 class="text-sm font-semibold text-white mb-4">資源</h4>
<ul class="space-y-2 text-sm">
<li><a href="/blog" class="hover:text-white transition-colors">部落格</a></li>
<li><a href="#faq" class="hover:text-white transition-colors">常見問題</a></li>
</ul>
</div>
<div>
<h4 class="text-sm font-semibold text-white mb-4">公司</h4>
<ul class="space-y-2 text-sm">
<li><a href="/about" class="hover:text-white transition-colors">關於我們</a></li>
<li><a href="/contact" class="hover:text-white transition-colors">聯絡我們</a></li>
</ul>
</div>
</div>
<!-- 版權列 -->
<div class="mt-12 pt-8 border-t border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm">
<span>© 2026 ProductName. 保留所有權利。</span>
<div class="flex items-center gap-6">
<a href="/privacy" class="hover:text-white transition-colors">隱私權政策</a>
<a href="/terms" class="hover:text-white transition-colors">服務條款</a>
</div>
</div>
</div>
</footer>
Footer 用 grid-cols-2 md:grid-cols-4——手機兩欄、桌機四欄。品牌欄用 col-span-2 md:col-span-1 讓它在手機佔滿整行(避免簡介文字被擠窄)、桌機才回到一欄。底部版權列用 flex-col sm:flex-row justify-between 讓版權文字與政策連結在手機垂直堆疊、桌機分列兩端。至此,由上而下六大區塊全部到位,一個完整的 Landing Page 就成形了。
常見錯誤與最佳實踐
行銷頁做起來看似簡單,但有幾個坑幾乎人人踩過,直接影響轉換率。
坑一:忘了行動優先,手機版擠成一團
最常見的錯誤是先把桌機版寫好,才回頭補手機。Tailwind 的斷點是「由小往大加」——沒前綴的 class 是手機預設,md: lg: 才往上疊。所以正確流程是先寫好手機版的單欄、全寬、小字,再用斷點前綴加多欄與大字。具體檢查三件事:grid 要有 grid-cols-1 打底再 md:grid-cols-3、外層容器要有 px-4 給兩側留白、Hero 標題要 text-4xl 起跳而非直接 text-7xl。
坑二:CTA 埋在一堆同權重的按鈕裡
如果每顆按鈕都用實心搶眼底色,結果就是沒有任何一顆搶眼。正確做法是建立層級:全頁只有一顆主 CTA 用最高對比(深色底白字或品牌色),其餘退成 outline 或純文字。而且主 CTA 要在 Hero、定價、頁尾多處重複出現,讓使用者滑到哪都能立刻行動。
坑三:深色模式對比不足,文字糊成一片
只加 dark:bg-gray-900 卻忘了同步調文字顏色,是暗色模式最常見的問題。務必成對處理——底色深了,文字就要 dark:text-gray-100、邊框要 dark:border-gray-700。特別小心 Hero 的漸層文字與定價卡的深色底,這些地方在深色模式下最容易對比崩掉。善用區塊底色深淺交替(白 → 灰 → 白),讓各區在兩種模式下都有清楚分層。
坑四:該用 grid 的地方硬用 flex
特色卡、定價卡這種「多張等寬、要換行」的規則網格,用 flex flex-wrap 硬排會發現每張卡寬度不好控制、換行後對不齊。這類場景 grid grid-cols-* 才是正解——欄寬自動均分、換欄只改前綴數字。一維排列(如 Navbar 左右分佈)用 flex,二維網格(如卡片牆)用 grid,選對工具事半功倍。
最佳實踐小結
- 行動優先鋪斷點:先寫手機版,再用
md:lg:往上加,別反過來。 - CTA 建立層級:一顆主 CTA 高對比、其餘退場,並在多處重複。
- 暗色成對調整:底色、文字、邊框一起改,別只改
dark:bg-*。 - flex 與 grid 各司其職:一維用 flex、二維卡片牆用 grid。
- 能用 CSS 就別用 JS:FAQ 用原生
<details>、hover 用group-hover:,把 JavaScript 留給漢堡選單與捲動效果。 - 正式站走完整建置:別掛 Play CDN,用
@import "tailwindcss";走建置流程產出精簡 CSS,行銷頁的載入速度直接影響轉換率。
小結
這是 TailwindCSS 完整教學 系列的第四十三篇,也是實戰案例的第一課。上一篇《Flutter Web 對照》,我們跨出 JavaScript 生態,從「一切皆 Widget」的角度回望 Tailwind 的 utility-first;這一篇則正式進入實戰,把前面累積的 flex、grid、響應式、group、暗色模式全部串起來,從零打造一個可以直接上線的行銷 Landing Page。回顧幾個重點:
- 版面拆解:拿到設計稿先切區塊,一維排列用
flex、二維卡片牆用grid,並定好max-w-7xl mx-auto px-4這個共用外殼。 - 逐段實作:Navbar(flex 左右分佈)、Hero(flex 垂直置中 + 漸層文字 + 主次 CTA)、Features(grid 三欄 + group hover)、Pricing(grid 三欄 + 突出推薦卡)、FAQ(原生 details 手風琴)、Footer(grid 多欄)。
- 響應式與暗色:行動優先鋪斷點,深色模式底色、文字、邊框成對調整。
- 行銷頁的坑:手機擁擠、CTA 埋沒、對比不足、選錯佈局工具,以及對應的正確做法。
下一篇《案例:部落格》,我們會換一種內容型頁面——文章列表、閱讀版面、typography 排版與側邊欄,示範 Tailwind 如何處理「以文字為主」的網站。行銷頁講的是轉換,部落格講的是閱讀體驗,兩者的版面思路很不一樣,值得對照著看。實戰之路,繼續往前。