如何在 Tailwind CSS 中自定义默认间距比例？

Question

我目前正在使用 Tailwind CSS 进行一个项目，我发现默认的间距比例（如 p-1、p-2 等）不太符合我项目的设计要求。我想自定义这个间距比例以使用不同的值。

我已经阅读了 Tailwind CSS 文档，但我仍然有点不清楚如何正确扩展或覆盖默认的间距比例。

我的具体问题是：

如何添加新的自定义间距值，同时仍保留默认值可用？ 完全覆盖默认间距比例的最佳实践是什么？ 用自定义比例完全替换默认比例是否有任何潜在的缺点？

这是我迄今为止尝试过的：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      }
    }
  }
}

这适用于添加新值，但我不确定如何完全替换默认比例，或者是否建议这样做。

经验丰富的 Tailwind CSS 用户提供的任何见解或最佳实践将不胜感激！

Answer 1

要添加新的自定义间距值，同时保持默认间距值可用，您已经从配置开始了：

// tailwind.config.js

module.exports = {
  theme: {
    spacing: {
      '1': '0.25rem',
      '2': '0.5rem',
      '3': '0.75rem',
      '4': '1rem',
      '5': '1.25rem',
      '6': '1.5rem',
      '7': '1.75rem',
      '8': '2rem',
      '9': '2.25rem',
      '10': '2.5rem',
      '12': '3rem',
      // Add custom values here
      '14': '3.5rem',
      '16': '4rem',
      // etc.
    }
  }
}