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) */
}

---

🎯 结论

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

Tailwind 让布局变得简单直观！