用 Tailwind CSS 快速构建响应式产品卡片组件

原创已于 2026-05-29 13:42:40 修改 · 1.3k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css #前端

于 2026-05-29 07:00:00 首次发布

前端专栏收录该内容

24 篇文章

订阅专栏

这是一个 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：按钮悬停变深色。

五、运行方法

将完整代码复制到 index.html 文件中。
双击打开，或使用 npx serve . 启动本地服务器。
调整浏览器窗口大小，观察卡片列数的变化。

六、定制扩展

1. 添加新卡片

只需复制 .bg-white.rounded-xl... 块，修改图片链接、标题、价格等即可。

2. 修改主题色

<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          'brand': '#10b981',  // 改为绿色
        }
      }
    }
  }
</script>