Tailwind CSS 中的 spacing 详解

🔍 Tailwind CSS 中的 `spacing` 详解

spacing（间距）是 Tailwind CSS 里的一个核心概念，它主要用于控制 padding（内边距）、margin（外边距）、width（宽度）、height（高度） 等 CSS 属性。Tailwind 提供了一套默认的 spacing 值，同时允许你 自定义扩展。

📌 1. Tailwind 的默认 `spacing` 规则

Tailwind 预定义了一组 spacing 值，通常基于 4px（0.25rem）为单位递增：

{
  spacing: {
    '0': '0px',
    '1': '0.25rem',  // 4px
    '2': '0.5rem',   // 8px
    '3': '0.75rem',  // 12px
    '4': '1rem',     // 16px
    '5': '1.25rem',  // 20px
    '6': '1.5rem',   // 24px
    '8': '2rem',     // 32px
    '10': '2.5rem',  // 40px
    '12': '3rem',    // 48px
    '16': '4rem',    // 64px
    '20': '5rem',    // 80px
    '24': '6rem',    // 96px
    '32': '8rem',    // 128px
    '40': '10rem',   // 160px
    '48': '12rem',   // 192px
    '56': '14rem',   // 224px
    '64': '16rem',   // 256px
  }
}

👉 这些数值可以直接用于 p-*、m-*、w-*、h-* 等类名，例如：

<div class="p-6 m-4 w-64 h-32 bg-blue-500">
  这个 div 具有 padding 1.5rem（24px）、margin 1rem（16px）、宽 16rem（256px）、高 8rem（128px）
</div>

📌 2. `spacing` 在 Tailwind 里的常见用法

🟢 `padding`（内边距）

<div class="p-4">padding: 1rem（16px）</div>
<div class="pt-6">padding-top: 1.5rem（24px）</div>
<div class="px-8">padding-left & right: 2rem（32px）</div>

🟢 `margin`（外边距）

<div class="m-2">margin: 0.5rem（8px）</div>
<div class="mt-10">margin-top: 2.5rem（40px）</div>
<div class="mx-12">margin-left & right: 3rem（48px）</div>

🟢 `width` & `height`（宽度 & 高度）

<div class="w-32 h-16 bg-gray-200">width: 8rem（128px），height: 4rem（64px）</div>

📌 3. 如何扩展 `spacing`

如果默认值不够用，可以在 tailwind.config.js 里扩展：

module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',  // 288px
        '84': '21rem',  // 336px
        '96': '24rem',  // 384px
      },
    },
  },
};

这样，你可以使用 p-72、w-96 等类名：

<div class="p-72 w-96 bg-red-500">新的 spacing 规则生效！</div>

**📌 4. `theme("spacing.*")` 用法**

如果要在 CSS 里使用 spacing，可以用 theme() 函数：

.btn {
  padding: theme("spacing.6");  /* 1.5rem (24px) */
  margin: theme("spacing.10");  /* 2.5rem (40px) */
}

🎯 结论

Tailwind 预定义了一组 spacing（基于 4px 递增）。
p-*、m-*、w-*、h-* 等类名都基于 spacing 值。
可以在 tailwind.config.js 里 扩展 spacing，而不是覆盖默认值。
theme("spacing.*") 可以在 CSS 里引用 spacing 值。

Tailwind 让布局变得简单直观！

常见误区

误区 1：把 spacing 当成“只管 padding”

spacing 不只影响 p-* 和 m-*。很多尺寸类也会读取同一套间距刻度，例如 w-*、h-*、gap-*、space-x-*、space-y-*。这也是为什么 Tailwind 项目看起来比较统一：按钮内边距、卡片间距、网格 gap 和固定尺寸常常来自同一组数字。

误区 2：随手写任意值

Tailwind 支持 p-[18px] 这类任意值，但它应该用于少数特殊场景。如果所有间距都写成任意值，项目会重新变成“每个页面自己发明一套尺寸”。优先使用默认 spacing，只有设计稿确实需要特殊值时再写任意值。

误区 3：覆盖默认 spacing

大多数项目应该用 theme.extend.spacing 扩展，而不是直接覆盖 theme.spacing。覆盖默认值会让 Tailwind 内置尺寸失效，也容易让第三方组件、旧代码和团队习惯突然不匹配。

误区 4：只看视觉，不看响应式

桌面端舒服的间距，在移动端可能太宽。写布局时可以把 spacing 和断点一起考虑，例如移动端使用 p-4，桌面端再变成 md:p-6 或 lg:p-8。这样既保留统一刻度，也能适配不同屏幕。

实战建议

先统一页面外层 padding，例如移动端 px-4，桌面端 md:px-8。
卡片内部优先用 p-4、p-5、p-6，不要每个卡片单独写像素。
列表和网格间距优先用 gap-*，比给每个子元素写 margin 更稳定。
团队项目里，把新增 spacing 的原因写清楚，避免设计系统越来越散。

继续阅读

如果你刚开始用 Tailwind，可以先看 Tailwind CSS 入门指南。
如果你想理解 rem 和根字号的关系，可以读 CSS rem 与 root font-size。
如果你在 Next.js 项目里组织样式，可以继续看 Next.js Server 与 Client Components 怎么选。

Tailwind CSS 中的 spacing 详解