如何自定义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',
},
}
})
}
],