Tailwind CSS - 自定义间距

Tailwind CSS 现代指南：自定义间距

一致的间距体系是设计良好用户界面的基础。Tailwind CSS 提供了一个全面的默认间距体系，但对于大多数实际项目，您会希望对其进行自定义以匹配您的设计系统。这通常在 tailwind.config.js 文件中完成。

配置文件中的 spacing 键控制着 padding (p-*)、margin (m-*)、width (w-*)、height (h-*)、gap (gap-*) 等工具类的值。对其进行自定义是搭建专业 Tailwind 项目的核心部分。

扩展默认间距体系

大多数情况下，您会希望 添加 新的间距值而不移除 Tailwind 的默认值。这是最安全也最常用的方法。您可以在 theme.extend.spacing 对象内部进行此操作。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      // 这会添加新的工具类，而不会移除默认的工具类
      spacing: {
        '13': '3.25rem',     // 52px
        '15': '3.75rem',     // 60px
        '128': '32rem',      // 512px
        'container': '80rem', // 特定用例的自定义名称
      }
    }
  }
}

通过上述配置，您现在除了 Tailwind 所有内置的间距工具类外，还可以使用 p-13、m-15、w-128 和 max-w-container 等类。

覆盖默认间距体系

对于具有非常严格设计系统的项目，您可能希望完全 替换 Tailwind 的默认间距体系。这将强制开发者只使用您定义的值。为此，请直接在 theme.spacing 下定义您的间距体系。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // 警告：这将移除所有默认的间距工具类
    // 并仅替换为此处定义的工具类。
    spacing: {
      'sm': '0.5rem',  // 8px
      'md': '1rem',    // 16px
      'lg': '1.5rem',  // 24px
      'xl': '2.5rem',  // 40px
    }
  }
}

自定义的最佳实践

• 遵循一个体系： 在定义自定义间距时，尽量遵循一个一致的数学比例（例如，4px 或 8px 的网格系统）。这会创造视觉和谐。例如，1rem (16px) 是 4 * 4px，而 1.5rem (24px) 是 6 * 4px。
• 使用 rem 单位： 最好将间距定义为 rem 单位。这使得您的布局能够响应用户的根字体大小设置，这是一项关键的可访问性特性。
• 语义化命名： 对于具有特定用途的特殊尺寸（如页面容器的最大宽度），请使用语义化名称，例如 'container' 或 'sidebar-width'，而不是数字名称。这使您的代码更具可读性。
• 常见陷阱： 最常见的错误是当您打算扩展间距体系时，却意外地覆盖了它。除非您绝对确定要替换默认值，否则请始终将您的添加内容放在 theme.extend 内部。

默认间距体系（参考）

作为参考，以下是 Tailwind 默认的、T恤尺寸般的间距体系的一部分。它基于 1rem = 16px 的基准，专为通用 UI 工作而设计。完整的间距体系可在官方文档中找到。

名称	大小 (rem)	像素 (基于 16px)
0.5	0.125rem	2px
1	0.25rem	4px
2	0.5rem	8px
4	1rem	16px
8	2rem	32px
16	4rem	64px
32	8rem	128px
64	16rem	256px