Tailwind CSS 页面模板

Tailwind CSS 页面模板

页面模板最大的价值不是"复制粘贴就能用"，而是让你看到一套经过验证的模块组合方式。下面这份基于 Tailwind CSS 的模板，包含导航、Hero、功能卡片、价格表等常见模块，全部用原子化 class 拼装，改起来直观，缩到手机上也不会散架。你可以把它当作一个起点，替换文案、换掉配色，几分钟内搭出像样的落地页。

参考：Tailwind CSS 官方文档 https://tailwindcss.com/docs

引入方式

动手之前，先决定怎么引入 Tailwind。两种常见方式：

<!-- CDN 方式（快速原型，适合临时页面） -->
<script src="https://cdn.tailwindcss.com"></script>

# npm 方式（推荐，生产环境使用）
npm install -D tailwindcss @tailwindcss/cli
npx @tailwindcss/cli init

CDN 方案零配置，浏览器里直接生效，适合演示和原型；生产环境建议用 npm 构建，产物只包含你实际用到的 class，体积更小、加载更快。两种方式下，下面的模块代码都可以直接使用。

导航栏

<header class="sticky top-0 bg-white/80 backdrop-blur border-b border-gray-100">
  <nav class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
    <a href="#" class="text-xl font-bold text-gray-900">Logo</a>
    <div class="hidden md:flex gap-8 text-gray-600">
      <a href="#" class="hover:text-gray-900">功能</a>
      <a href="#" class="hover:text-gray-900">价格</a>
      <a href="#" class="hover:text-gray-900">文档</a>
    </div>
    <a href="#" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium">登录</a>
  </nav>
</header>

sticky top-0 让导航栏在滚动时固定在顶部，bg-white/80 backdrop-blur 做出毛玻璃效果，内容滚到导航下方也能看清。中间链接用 hidden md:flex 在小屏上隐藏，避免手机端导航拥挤。

Hero 区域

<section class="bg-gradient-to-br from-indigo-50 to-white py-20">
  <div class="max-w-6xl mx-auto px-4 text-center">
    <h1 class="text-5xl font-bold text-gray-900 mb-6">
      构建你的<span class="text-indigo-600">下一个产品</span>
    </h1>
    <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
      从零开始快速搭建专业网站。选择合适的方案，开始你的建站之旅。
    </p>
    <div class="flex gap-4 justify-center">
      <a href="#" class="bg-indigo-600 text-white px-8 py-3 rounded-lg
        hover:bg-indigo-700 transition font-medium">
        免费开始
      </a>
      <a href="#" class="border border-gray-300 text-gray-700 px-8 py-3 rounded-lg
        hover:border-gray-400 transition font-medium">
        了解更多
      </a>
    </div>
  </div>
</section>

Hero 是用户进站后第一眼看到的内容。这里用 bg-gradient-to-br from-indigo-50 to-white 做柔和渐变背景，主标题 text-5xl 拉开视觉层级，两个按钮一实一虚形成主次：实心按钮引导转化，描边按钮承接"了解更多"。max-w-6xl mx-auto 让内容在大屏居中且不超出阅读宽度。

功能卡片网格

<section class="py-16 bg-white">
  <div class="max-w-6xl mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-12">核心功能</h2>
    <div class="grid md:grid-cols-3 gap-8">
      <div class="p-6 rounded-xl border border-gray-100 hover:shadow-lg transition">
        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor"
            viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round"
            stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
        </div>
        <h3 class="text-xl font-semibold mb-2">闪电加速</h3>
        <p class="text-gray-600">全球 CDN 加速，确保你的网站秒级加载。</p>
      </div>
      <div class="p-6 rounded-xl border border-gray-100 hover:shadow-lg transition">
        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor"
            viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round"
            stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2
            0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
        </div>
        <h3 class="text-xl font-semibold mb-2">安全可靠</h3>
        <p class="text-gray-600">内置 WAF 和 DDoS 防护，守护你的网站安全。</p>
      </div>
      <div class="p-6 rounded-xl border border-gray-100 hover:shadow-lg transition">
        <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor"
            viewBox="0 0 24 24"><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-xl font-semibold mb-2">99.9% 可用性</h3>
        <p class="text-gray-600">企业级 SLA 保障，确保你的业务持续在线。</p>
      </div>
    </div>
  </div>
</section>

功能卡片是 SaaS 落地页最常见的模块。grid md:grid-cols-3 一行三列，小屏自动堆叠为单列；每张卡片用 hover:shadow-lg transition 提供细微的悬浮反馈。图标用内联 SVG，配合 text-indigo-600 着色，不依赖任何图标库。需要增减功能时，直接复制或删除一个卡片 <div> 即可。

价格表

<section class="py-16 bg-gray-50">
  <div class="max-w-6xl mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-12">选择适合的方案</h2>
    <div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
      <div class="bg-white p-8 rounded-xl shadow-sm text-center">
        <h3 class="text-xl font-semibold mb-2">入门版</h3>
        <p class="text-4xl font-bold text-indigo-600 mb-6">$9<small class="text-lg text-gray-500">/月</small></p>
        <ul class="text-left space-y-3 mb-8">
          <li class="flex items-center gap-2">✓ 1 个网站</li>
          <li class="flex items-center gap-2">✓ 10GB 存储</li>
          <li class="flex items-center gap-2">✓ 免费 SSL</li>
        </ul>
        <a href="#" class="block w-full border border-indigo-600 text-indigo-600 py-2 rounded-lg
          hover:bg-indigo-50 transition">选择方案</a>
      </div>
      <div class="bg-white p-8 rounded-xl shadow-sm text-center ring-2 ring-indigo-600">
        <span class="text-xs bg-indigo-600 text-white px-3 py-1 rounded-full">推荐</span>
        <h3 class="text-xl font-semibold mt-2 mb-2">专业版</h3>
        <p class="text-4xl font-bold text-indigo-600 mb-6">$29<small class="text-lg text-gray-500">/月</small></p>
        <ul class="text-left space-y-3 mb-8">
          <li class="flex items-center gap-2">✓ 10 个网站</li>
          <li class="flex items-center gap-2">✓ 100GB 存储</li>
          <li class="flex items-center gap-2">✓ CDN 加速</li>
        </ul>
        <a href="#" class="block w-full bg-indigo-600 text-white py-2 rounded-lg
          hover:bg-indigo-700 transition">选择方案</a>
      </div>
      <div class="bg-white p-8 rounded-xl shadow-sm text-center">
        <h3 class="text-xl font-semibold mb-2">企业版</h3>
        <p class="text-4xl font-bold text-indigo-600 mb-6">$99<small class="text-lg text-gray-500">/月</small></p>
        <ul class="text-left space-y-3 mb-8">
          <li class="flex items-center gap-2">✓ 无限网站</li>
          <li class="flex items-center gap-2">✓ 1TB 存储</li>
          <li class="flex items-center gap-2">✓ 优先支持</li>
        </ul>
        <a href="#" class="block w-full border border-indigo-600 text-indigo-600 py-2 rounded-lg
          hover:bg-indigo-50 transition">联系销售</a>
      </div>
    </div>
  </div>
</section>

价格表把"入门 / 专业 / 企业"三个档位横向排列，专业版用 ring-2 ring-indigo-600 加边框高亮，并附一个"推荐"角标。三个档位的 CTA 按钮刻意做了差异化——专业版是实心强调，另外两档是描边，视觉上引导用户往中间档走。max-w-4xl mx-auto 收窄表格宽度，避免三栏被拉得太开。

页脚

<footer class="bg-gray-50 border-t border-gray-100 py-12">
  <div class="max-w-6xl mx-auto px-4 grid md:grid-cols-4 gap-8">
    <div class="md:col-span-2">
      <h3 class="font-bold text-gray-900 mb-2">产品名</h3>
      <p class="text-gray-500 text-sm">用一句话描述你的产品价值。</p>
    </div>
    <div>
      <h4 class="font-medium text-gray-900 mb-3">产品</h4>
      <ul class="space-y-2 text-sm text-gray-500">
        <li><a href="#" class="hover:text-gray-900">功能</a></li>
        <li><a href="#" class="hover:text-gray-900">价格</a></li>
      </ul>
    </div>
    <div>
      <h4 class="font-medium text-gray-900 mb-3">公司</h4>
      <ul class="space-y-2 text-sm text-gray-500">
        <li><a href="#" class="hover:text-gray-900">关于我们</a></li>
        <li><a href="#" class="hover:text-gray-900">联系方式</a></li>
      </ul>
    </div>
  </div>
  <div class="max-w-6xl mx-auto px-4 mt-8 pt-6 border-t border-gray-100 text-sm text-gray-400">
    © 2026 产品名. 保留所有权利。
  </div>
</footer>

模块组合思路

这几个模块可以按页面类型自由组合。落地页通常走"导航 → Hero → 功能卡片 → 价格表 → 页脚"的完整链路；SaaS 产品页可以只取"导航 + 功能卡片 + 页脚"；活动页则突出 Hero 加价格表。组合时注意保持间距节奏一致：区块之间统一用 py-16 或 py-20，卡片内部间距保持同一档位，页面就不会显得杂乱。配色上建议全局只用一个主色加一个中性色，Tailwind 的 indigo 全套档位可以直接套到任何品牌色上。

使用说明

1. 将需要的 HTML 模块复制到你的项目文件中
2. 确保已引入 Tailwind CSS（CDN 或 npm 安装）
3. 修改文本内容和链接地址
4. 根据品牌色替换 indigo 为你的主题色

自定义技巧

• 换主题色：全局替换 indigo 为你的品牌色，注意深浅档位（indigo-50/100/600/700）一一对应。
• 调间距：gap-8、py-16、mb-12 这类间距 class 按 4px 基数递增，改起来很直观。
• 响应式断点：md: 表示 768px 以上生效，想更早堆叠可以换成 sm:（640px）。

常见问题

• 为什么样式没生效？ 检查 Tailwind 是否已引入，以及是否用了生产构建——未生成的 class 不会被包含。
• 可以直接商用吗？ 可以。这些模块基于 MIT 协议的 Tailwind 框架编写，没有版权负担。
• 需要 JavaScript 框架吗？ 不需要。纯 HTML + Tailwind 即可，也可以作为 Vue/React 组件的起点。
• 字号怎么调整？ 文本类按预设比例（text-sm、text-base、text-xl）提供，直接改 class 名即可。

16IDC 观察

一份好的模板不是把所有组件堆在一起，而是让模块之间有清晰的主次和一致的间距系统。把这份模板当作骨架，按你的产品逻辑重新排序组合上面的模块，很快就能得到一套属于自己的页面组件库。