Tailwind CSS 間距

定制間距

為您的項(xiàng)目定制默認(rèn)間距和大小比例。

在您的 ?tailwind.config.js? 文件的 ?theme? 部分使用 ?spacing ?鍵來(lái)定制 Tailwind 的默認(rèn)間距/大小比例。

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    }
  }
}

默認(rèn)情況下，間距比例由 padding、 margin、 width、 height、 maxHeight、 gap、 inset、 space 和 translate 核心插件繼承。

擴(kuò)展默認(rèn)的間距比例

正如 主題文檔 中所描述的那樣，如果您想擴(kuò)展默認(rèn)的間距，您可以使用您的 ?tailwind.config.js? 文件中的 ?theme.extend.spacing? 部分來(lái)實(shí)現(xiàn)。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '128': '32rem',
        '144': '36rem',
      }
    }
  }
}

這將生成像 p-13、m-15 和 h-128 這樣的類(lèi)，除了所有 Tailwind 的默認(rèn)間距/大小功能類(lèi)。

覆蓋默認(rèn)間距比例

正如 主題文檔 中所描述的，如果您想覆蓋默認(rèn)的間距，您可以使用您的 ?tailwind.config.js? 文件中的 ?theme.spacing? 部分來(lái)實(shí)現(xiàn)。

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      sm: '8px',
      md: '12px',
      lg: '16px',
      xl: '24px',
    }
  }
}

這將禁用 Tailwind 的默認(rèn)間距比例，并生成像 p-sm、m-md、w-lg 和 h-xl 這樣的類(lèi)。

默認(rèn)間距比例

默認(rèn)情況下，Tailwind 包括一個(gè)豐富和全面的數(shù)字間隔比例。這些值是成比例的，所以 16 是 8 的兩倍。一個(gè)間距單位等于 0.25rem，在通用瀏覽器中默認(rèn)為 4px。