客製化間距 (Customizing Spacing)

在 tailwind.config.js 檔案裡的 theme 使用 spacing 來指定 Tailwind 的 預設間距/尺寸大小。

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

在預設情況下，間距大小會被 padding、margin、width、height、maxHeight、gap、inset、space 和 translate 等核心插件繼承。

擴充預設的間距大小設定

如同 theme documentation 所描述，如果你想擴充預設的間距大小設定，你可以在 tailwind.config.js 裡的 theme.extend.spacing 區段進行設定：

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

這將會增加 p-13、m-15 和 h-128 的 class 到 Tailwind 的預設間距/尺寸功能裡。

覆寫預設間距大小

如同 theme documentation 所描述，如果你想要覆寫預設的間距大小設定，你可以在 tailwind.config.js 裡的 theme.extend.spacing 區段進行設定：

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

這將會禁用 Tailwind 裡預設的間距設定，並且建立 p-sm、m-md、w-lg 和 h-xl 的 class 取代原有的設定。

預設間距大小

在預設中，Tailwind 包含大量且全面的間距大小設定。這些數值是成比例的，例如 16 是 8 的兩倍。一個間距單元是 0.25rem，這在常見的瀏覽器中會被轉換為 4px 。