Tailwind CSS - 间隙

Tailwind CSS：间距 (Gap)

Tailwind CSS 中的 gap 工具类是一种现代而高效的方式，用于在 Grid 或 Flexbox 容器中的项目之间和周围创建空间。它取代了手动为子元素添加外边距的需要，从而带来更简洁的代码和更一致的布局。

核心概念：Flexbox 和 Grid 间距

gap 工具类是 CSS 属性 gap、row-gap 和 column-gap 的简写。它们仅当应用于具有 display: grid 或 display: flex 的父容器时才有效（在行之间产生间距时需配合 flex-wrap: wrap）。

• gap-{size}：设置行和列的统一间距。
• gap-x-{size}：仅设置列间距（水平空间）。
• gap-y-{size}：仅设置行间距（垂直空间）。

常用间距工具类

Tailwind 提供了完整的间距比例。以下是一些最常用的 gap 工具类。数字对应于基于 Tailwind 默认间距单位的值，其中 1 对应 0.25rem（默认 4px）。

Class	CSS Properties
gap-0	gap: 0px;
gap-px	gap: 1px;
gap-2	gap: 0.5rem; /* 8px */
gap-4	gap: 1rem; /* 16px */
gap-x-8	column-gap: 2rem; /* 32px */
gap-y-6	row-gap: 1.5rem; /* 24px */

专业提示： 你无需记住所有这些类。模式是一致的。有关完整的间距比例，请参阅 Tailwind CSS 官方文档。

实际示例

示例 1：为卡片网格添加间距

gap 工具类非常适合创建均匀间隔的网格布局，例如产品卡片画廊。在此示例中，gap-4 在所有网格项之间（水平和垂直方向）添加 1rem 的空间。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Gap Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 p-8">

  <h2 class="text-2xl font-bold mb-4 text-slate-800">Product Showcase</h2>

  <div class="grid grid-cols-3 gap-4">
    <!-- 通过将 'gap-4' 应用于网格容器，我们获得了完美的间距 -->
    <div class="bg-white rounded-lg shadow p-6 font-mono">Product 01</div>
    <div class="bg-white rounded-lg shadow p-6 font-mono">Product 02</div>
    <div class="bg-white rounded-lg shadow p-6 font-mono">Product 03</div>
    <div class="bg-white rounded-lg shadow p-6 font-mono">Product 04</div>
    <div class="bg-white rounded-lg shadow p-6 font-mono">Product 05</div>
    <div class="bg-white rounded-lg shadow p-6 font-mono">Product 06</div>
  </div>

</body>
</html>

示例 2：为换行 Flex 项添加间距

当使用带有 flex-wrap 的 flex 容器时，你可以使用 gap-x-* 和 gap-y-* 来独立控制间距。这对于创建像标签云这样的布局很有用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Gap Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 p-8">

  <h2 class="text-2xl font-bold mb-4 text-slate-800">Category Tags</h2>

  <div class="flex flex-wrap gap-x-3 gap-y-3 p-4 bg-white rounded-lg">
    <!-- gap-x-3 用于水平间距，gap-y-3 用于项目换行时的垂直间距 -->
    <span class="bg-sky-200 text-sky-800 text-sm font-semibold px-3 py-1 rounded-full">Technology</span>
    <span class="bg-amber-200 text-amber-800 text-sm font-semibold px-3 py-1 rounded-full">Productivity</span>
    <span class="bg-emerald-200 text-emerald-800 text-sm font-semibold px-3 py-1 rounded-full">Design</span>
    <span class="bg-indigo-200 text-indigo-800 text-sm font-semibold px-3 py-1 rounded-full">Marketing</span>
    <span class="bg-rose-200 text-rose-800 text-sm font-semibold px-3 py-1 rounded-full">Business</span>
    <span class="bg-slate-200 text-slate-800 text-sm font-semibold px-3 py-1 rounded-full">Lifestyle</span>
  </div>

</body>
</html>

现代特性与最佳实践

响应式间距

Tailwind 的一个关键特性是响应式设计。你可以通过使用 sm:、md: 和 lg: 等断点前缀，轻松地在不同屏幕尺寸下改变间距大小。

<!-- 在移动设备上使用小间距，在中等屏幕及以上使用大间距 -->
<div class="grid grid-cols-2 **gap-2 md:gap-6**">
  <!-- ... grid items ... -->
</div>

任意值

得益于 Tailwind 的即时 (JIT) 编译器，如果默认间距比例中没有你需要的确切值，你可以使用方括号语法定义任意值。

<!-- 使用 13px 的精确间距 -->
<div class="flex gap-[13px]">
  <!-- ... flex items ... -->
</div>

自定义主题

对于实际项目，你很可能会使用构建流程。这允许你通过 tailwind.config.js 文件自定义你的主题。你可以使用自己的值扩展默认的 gap 比例。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      gap: {
        '2.5': '0.625rem', // 10px
        'fluid': 'clamp(1rem, 5vw, 2rem)',
      }
    }
  }
}