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 的兩倍）。