自訂間距 - Tailwind CSS 框架

在 tailwind.config.js 檔案的 theme 區段中使用 spacing 鍵自訂 Tailwind 的預設間距/大小比例。

tailwind.config.js

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

預設間距比例會由核心外掛程式 padding、margin、width、minWidth、maxWidth、height、minHeight、maxHeight、gap、inset、space、translate、scrollMargin 和 scrollPadding 繼承。

延伸預設間距比例

如主題文件所述，如果你想延伸預設間距比例，你可以使用 tailwind.config.js 檔案的 theme.extend.spacing 區段

tailwind.config.js

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

這將會產生類別，例如 p-13、m-15 和 h-128，除了所有 Tailwind 的預設間距/大小公用程式。

覆寫預設間距比例

如主題文件所述，如果你想覆寫預設間距比例，你可以使用 tailwind.config.js 檔案的 theme.spacing 區段

tailwind.config.js

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

這將會停用 Tailwind 的預設間距比例，並產生類別，例如 p-sm、m-md、w-lg 和 h-xl。

預設間距比例

預設情況下，Tailwind 包含一個豐富且全面的數字間距比例。這些值是成比例的，例如 16 的間距是 8 的兩倍。一個間距單位等於 0.25rem，在常見的瀏覽器中預設轉換為 4px。

名稱	大小	像素
0	0px	0px
px	1px	1px
0.5	0.125rem	2px
1	0.25rem	4px
1.5	0.375rem	6px
2	0.5rem	8px
2.5	0.625rem	10px
3	0.75rem	12px
3.5	0.875rem	14px
4	1rem	16px
5	1.25rem	20px
6	1.5rem	24px
7	1.75rem	28px
8	2rem	32px
9	2.25rem	36px
10	2.5rem	40px
11	2.75rem	44px
12	3rem	48px
14	3.5rem	56px
16	4rem	64px
20	5rem	80px
24	6rem	96px
28	7rem	112px
32	8rem	128px
36	9rem	144px
40	10rem	160px
44	11rem	176px
48	12rem	192px
52	13rem	208px
56	14rem	224px
60	15rem	240px
64	16rem	256px
72	18rem	288px
80	20rem	320px
96	24rem	384px

​延伸預設間距比例

​覆寫預設間距比例

​預設間距比例

在此頁面上

延伸預設間距比例

覆寫預設間距比例

預設間距比例