如何自定义TailwindCSS的容器宽度

如何自定义TailwindCSS的container宽度。

打开项目下的tailwind.config.js文件，编辑plugins: []，参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
plugins: [
  function ({ addComponents }) {
    addComponents({
      '.container': {
        maxWidth: '370px', //tailwind是mobile优先，所以首先定义缺省宽度为mobile端的宽度
        '@screen sm': {
          maxWidth: '640px', //其他屏幕大小的情况根据需求定义
        },
        '@screen md': {
          maxWidth: '700px',
        },
        '@screen lg': {
          maxWidth: '1126px',
        },
        '@screen xl': {
          maxWidth: '1126px',
        },
      }
    })
  }
],