🔍 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 讓布局變得簡單直觀！
)
