这是一个 Tailwind CSS 项目练手博客，附上教学篇：
https://blog.csdn.net/2402_88266590/article/details/161455984?spm=1011.2415.3001.5331
学会原子类 CSS，告别手写样式
一、我们要做什么？
产品卡片是电商网站、作品集、博客列表中最常见的 UI 组件。它通常包含：
-
产品图片
-
标题
-
简短描述
-
价格
-
购买/查看按钮
今天我们只用 Tailwind CSS 的原子类，不写一行自定义 CSS，来构建一个响应式的产品卡片网格，让它从手机到桌面都能完美适配。
最终效果：
桌面
平板与手机
二、准备工作
方式一：CDN 尝鲜
推荐直接复制运行，本项目就是用的这个方法。
<script src="https://cdn.tailwindcss.com"></script>
方式二：Vite + 本地安装
生产推荐
npm create vite@latest product-cards — –template vanilla
cd product-cards
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
然后将以下代码完整粘贴到 index.html 中即可。
三、完整代码
可直接复制运行
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<!– 可选：自定义主题（仅用于演示） –>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'brand': '#3b82f6',
}
}
}
}
</script>
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-center text-gray-800 mb-2">精选产品</h1>
<p class="text-center text-gray-500 mb-10">🔥 热门推荐 | 限时折扣</p>
<!– 响应式网格：手机1列，平板2列，桌面3列，大屏4列 –>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!– 卡片 1 –>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/20/400/300" alt="产品图片">
<div class="p-5">
<div class="flex justify-between items-start">
<h3 class="text-lg font-semibold text-gray-800">无线降噪耳机</h3>
<span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded-full">热卖</span>
</div>
<p class="text-gray-500 text-sm mt-2">主动降噪，30小时续航，轻盈舒适，沉浸音乐世界。</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-2xl font-bold text-brand">¥299</span>
<button class="bg-brand hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
立即购买
</button>
</div>
</div>
</div>
<!– 卡片 2 –>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/26/400/300" alt="产品图片">
<div class="p-5">
<h3 class="text-lg font-semibold text-gray-800">智能运动手表</h3>
<p class="text-gray-500 text-sm mt-2">心率监测，GPS定位，50米防水，多种运动模式。</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-2xl font-bold text-brand">¥899</span>
<button class="bg-brand hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
立即购买
</button>
</div>
</div>
</div>
<!– 卡片 3 –>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/0/400/300" alt="产品图片">
<div class="p-5">
<h3 class="text-lg font-semibold text-gray-800">机械键盘</h3>
<p class="text-gray-500 text-sm mt-2">青轴手感，RGB背光，全键无冲，电竞首选。</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-2xl font-bold text-brand">¥399</span>
<button class="bg-brand hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
立即购买
</button>
</div>
</div>
</div>
<!– 卡片 4 –>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/1/400/300" alt="产品图片">
<div class="p-5">
<h3 class="text-lg font-semibold text-gray-800">4K 无人机</h3>
<p class="text-gray-500 text-sm mt-2">航拍高清，三轴云台，30分钟续航，新手易上手。</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-2xl font-bold text-brand">¥1999</span>
<button class="bg-brand hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
立即购买
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
四、代码逐段讲解
1. 引入 Tailwind 和自定义主题
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'brand': '#3b82f6', // 自定义品牌色
}
}
}
}
</script>
第一行加载 Tailwind CDN（快速演示，生产用本地安装）。
第二段扩展了主题颜色，添加了一个叫 brand 的颜色，之后用 bg-brand 或 text-brand 即可调用。
2. 容器与标题
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-center text-gray-800 mb-2">精选产品</h1>
<p class="text-center text-gray-500 mb-10">🔥 热门推荐 | 限时折扣</p>
container：响应式容器，自动居中。
mx-auto：左右自动边距，居中。
px-4：左右内边距。
text-3xl font-bold text-center：大号加粗居中。
mb-10：下边距。
3. 响应式网格（核心）
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
| 无前缀 | grid-cols-1 | 手机默认 1 列 |
| sm: | grid-cols-2 | ≥640px 变成 2 列 |
| lg: | grid-cols-3 | ≥1024px 变成 3 列 |
| xl: | grid-cols-4 | ≥1280px 变成 4 列 |
| gap-6 | 间距 1.5rem | 行列间距统一 |
4. 单个卡片结构
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
<!– 图片 –>
<img class="w-full h-48 object-cover" src="…" alt="…">
<!– 内容区 –>
<div class="p-5">
<div class="flex justify-between items-start">
<h3 class="text-lg font-semibold text-gray-800">无线降噪耳机</h3>
<span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded-full">热卖</span>
</div>
<p class="text-gray-500 text-sm mt-2">…</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-2xl font-bold text-brand">¥299</span>
<button class="bg-brand hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
立即购买
</button>
</div>
</div>
</div>
bg-white rounded-xl shadow-md：白色背景、大圆角、中等阴影。
overflow-hidden：防止图片溢出圆角。
hover:shadow-lg transition-shadow duration-300：鼠标悬停阴影变大，过渡 0.3 秒。
w-full h-48 object-cover：图片填满宽度，高度固定，裁剪适配。
flex justify-between items-start：标题和徽章左右对齐。
bg-red-100 text-red-600：红色浅背景深色文字徽章。
mt-4：上边距。
hover:bg-blue-700：按钮悬停变深色。
五、运行方法
六、定制扩展
1. 添加新卡片
只需复制 .bg-white.rounded-xl… 块，修改图片链接、标题、价格等即可。
2. 修改主题色
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'brand': '#10b981', // 改为绿色
}
}
}
}
</script>
3. 增加暗色模式支持
给外层容器添加 dark:bg-gray-900 dark:text-white，并在 html 上动态切换 .dark 类（需配置 darkMode: 'class'）。
七、总结
通过这个例子，你学会了：
用 Tailwind 的网格系统（grid + 断点前缀）快速实现响应式布局。
组合原子类（bg-white、shadow-md、rounded-xl）构建现代卡片。
使用 hover: 前缀添加悬停效果。
通过 transition-* 让交互更平滑。
下一步，尝试自己用 Tailwind 复刻一个网站首页，你会发现写 CSS 的效率至少提升一倍！
