「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

客製化間距 (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',
    }
  }
}

在預設情況下,間距大小會被 paddingmarginwidthheightmaxHeightgapinsetspacetranslate 等核心插件繼承。


擴充預設的間距大小設定

如同 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-13m-15h-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-smm-mdw-lgh-xl 的 class 取代原有的設定。


預設間距大小

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

NameSizePixels
00px0px
px1px1px
0.50.125rem2px
10.25rem4px
1.50.375rem6px
20.5rem8px
2.50.625rem10px
30.75rem12px
3.50.875rem14px
41rem16px
51.25rem20px
61.5rem24px
71.75rem28px
82rem32px
92.25rem36px
102.5rem40px
112.75rem44px
123rem48px
143.5rem56px
164rem64px
205rem80px
246rem96px
287rem112px
328rem128px
369rem144px
4010rem160px
4411rem176px
4812rem192px
5213rem208px
5614rem224px
6015rem240px
6416rem256px
7218rem288px
8020rem320px
9624rem384px