Tailwind CSS - 自定义间距

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

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

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

注意:默认情况下，间距比例由padding、margin、width、minWidth、maxWidth、height、minHeight、maxHeight、gap、inset、space、translate、scrollMargin 和 scrollPadding 核心插件。

扩展默认间距比例

您可以通过在 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 的两倍)。