Tailwind CSS on GitHub

自定义间距

自定义间距和尺寸。

通过 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.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类。


覆盖间距

就像theme documentation里面面熟的,如果你想覆盖默认间距,直接在theme.spacing字段上添加你的自定义间距:

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

这只会生成p-sm, m-md, w-lg以及 h-xl,而不会生成默认间距。


默认间距

默认情况下,Tailwind提供了一个全面的间距列表。这些值都是成比例的,一个单位等于0.25rem,在普通浏览器中默认为4px,所以16就是16 * 0.25rem = 4rem

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