Tailwind CSS 间距

2022-07-28 10:31 更新

定制间距

为您的项目定制默认间距和大小比例。


在您的 ​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 核心插件继承。

扩展默认的间距比例

正如 主题文档 中所描述的那样,如果您想扩展默认的间距,您可以使用您的 ​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-15 和 h-128 这样的类,除了所有 Tailwind 的默认间距/大小功能类。

覆盖默认间距比例

正如 主题文档 中所描述的,如果您想覆盖默认的间距,您可以使用您的 ​tailwind.config.js​ 文件中的 ​theme.spacing​ 部分来实现。

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

这将禁用 Tailwind 的默认间距比例,并生成像 p-smm-mdw-lg 和 h-xl 这样的类。

默认间距比例

默认情况下,Tailwind 包括一个丰富和全面的数字间隔比例。这些值是成比例的,所以 16 是 8 的两倍。一个间距单位等于 0.25rem,在通用浏览器中默认为 4px

Name Size Pixels
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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号