文档
Tailwind CSS 响应式卡片布局
目标
纯 HTML + Tailwind CDN，快速搭建响应式卡片网格。无需 npm、无需构建，零门槛。
完整代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS 卡片</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen p-6">
<!-- 头部 -->
<header class="max-w-5xl mx-auto mb-10 text-center">
<h1 class="text-4xl font-extrabold text-gray-900 mb-2">
🎨 Tailwind CSS 卡片
</h1>
<p class="text-gray-500 text-lg">Utility-First CSS — 在 HTML 里搞定一切样式</p>
</header>
<!-- 卡片网格 -->
<main class="max-w-5xl mx-auto grid gap-6
grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<!-- 卡片 1 -->
<div class="bg-white rounded-2xl shadow-md overflow-hidden
hover:shadow-xl transition-shadow duration-300">
<div class="h-40 bg-gradient-to-br from-blue-400 to-blue-600
flex items-center justify-center">
<span class="text-white text-5xl">⚡</span>
</div>
<div class="p-5">
<h3 class="font-semibold text-lg text-gray-900 mb-2">极速开发</h3>
<p class="text-gray-600 text-sm">Utility class 直接在 HTML 中组合，告别 CSS 文件跳转。</p>
<div class="mt-4 flex items-center gap-2">
<span class="bg-blue-100 text-blue-700 text-xs px-3 py-1 rounded-full">Vite</span>
<span class="bg-green-100 text-green-700 text-xs px-3 py-1 rounded-full">零配置</span>
</div>
</div>
</div>
<!-- 卡片 2 -->
<div class="bg-white rounded-2xl shadow-md overflow-hidden
hover:shadow-xl transition-shadow duration-300">
<div class="h-40 bg-gradient-to-br from-purple-400 to-pink-500
flex items-center justify-center">
<span class="text-white text-5xl">📱</span>
</div>
<div class="p-5">
<h3 class="font-semibold text-lg text-gray-900 mb-2">响应式设计</h3>
<p class="text-gray-600 text-sm">sm:/md:/lg:/xl: 断点前缀，移动优先，一行搞定适配。</p>
<div class="mt-4 flex items-center gap-2">
<span class="bg-purple-100 text-purple-700 text-xs px-3 py-1 rounded-full">Mobile-First</span>
</div>
</div>
</div>
<!-- 卡片 3 -->
<div class="bg-white rounded-2xl shadow-md overflow-hidden
hover:shadow-xl transition-shadow duration-300">
<div class="h-40 bg-gradient-to-br from-green-400 to-teal-500
flex items-center justify-center">
<span class="text-white text-5xl">🎯</span>
</div>
<div class="p-5">
<h3 class="font-semibold text-lg text-gray-900 mb-2">生产体积小</h3>
<p class="text-gray-600 text-sm">自动 Tree-shake 未使用的 class，构建后通常 <10KB gzip。</p>
<div class="mt-4 flex items-center gap-2">
<span class="bg-green-100 text-green-700 text-xs px-3 py-1 rounded-full">Tree-Shake</span>
<span class="bg-orange-100 text-orange-700 text-xs px-3 py-1 rounded-full"><10KB</span>
</div>
</div>
</div>
</main>
<!-- 特性对比表 -->
<section class="max-w-3xl mx-auto mt-12">
<h2 class="text-2xl font-bold text-gray-900 mb-4 text-center">断点系统</h2>
<div class="overflow-hidden rounded-xl border border-gray-200">
<table class="w-full text-sm">
<thead class="bg-gray-100">
<tr>
<th class="p-3 text-left">前缀</th>
<th class="p-3 text-left">最小宽度</th>
<th class="p-3 text-left">适用设备</th>
</tr>
</thead>
<tbody>
<tr class="border-t"><td class="p-3 font-mono">无</td><td class="p-3">0px</td><td class="p-3">手机</td></tr>
<tr class="border-t"><td class="p-3 font-mono">sm:</td><td class="p-3">640px</td><td class="p-3">大屏手机</td></tr>
<tr class="border-t"><td class="p-3 font-mono">md:</td><td class="p-3">768px</td><td class="p-3">平板</td></tr>
<tr class="border-t"><td class="p-3 font-mono">lg:</td><td class="p-3">1024px</td><td class="p-3">笔记本</td></tr>
<tr class="border-t"><td class="p-3 font-mono">xl:</td><td class="p-3">1280px</td><td class="p-3">桌面</td></tr>
</tbody>
</table>
</div>
</section>
</body>
</html>
运行
直接在浏览器打开 HTML 文件即可，无需任何构建工具。
预期输出
- 3 列响应式卡片：手机 1 列、平板 2 列、桌面 3 列
- 渐变背景、悬停阴影、圆角标签
- 断点参考表