🔍 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 让布局变得简单直观！
