Tailwind CSS - 自定义间距

Tailwind CSS 间距允许您为项目指定默认间距和尺寸比例。

您可以在 'tailwind.config.js' 文件的 'theme' 部分中使用 'spacing' 键来自定义 Tailwind 的默认间距/尺寸比例。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
    }
  }
}

注意：默认情况下，间距比例会被填充、边距、宽度、最小宽度、最大宽度、高度、最小高度、最大高度、间隙、内边距、空间、平移、滚动边距 和 滚动填充 核心插件继承。

扩展默认间距比例

您可以通过在 tailwind.config.js 文件的 theme.extend.spacing 部分添加自定义值来扩展 Tailwind 中的默认间距比例。这允许您除了默认值之外，还可以创建新的间距类，例如 p-13、m-15 和 h-128。

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    extend: {
        spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '128': '32rem',
        '144': '36rem',
        }
    }
    }
}

覆盖默认间距比例

您可以通过更新 'tailwind.config.js' 文件中的 'theme.spacing' 部分来替换 Tailwind 中的默认间距比例。这将删除默认的间距类，并根据您的自定义设置生成新的类，例如 p-sm、m-md、w-lg 和 h-xl。

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    spacing: {
        sm: '8px',
        md: '12px',
        lg: '16px',
        xl: '24px',
    }
    }
}

默认间距比例

Tailwind 带有一个内置的数字间距比例，其中包含一系列值。这些值是成比例的，这意味着较高的值始终是较低值的倍数（例如，16 是 8 的两倍）。