Oct 15, 2020 in Tailwind css
The basic container width is this:
.container | None | width: 100%; |
sm (640px) | max-width: 640px; | |
md (768px) | max-width: 768px; | |
lg (1024px) | max-width: 1024px; | |
xl (1280px) | max-width: 1280px; |
To make it larger or smaller on certain breakpoints, edit your tailwind.config.js like this:
module.exports = {
corePlugins: {
container: false
},
plugins: [
function ({ addComponents }) {
addComponents({
'.container': {
maxWidth: '100%',
'@screen sm': {
maxWidth: '640px',
},
'@screen md': {
maxWidth: '768px',
},
'@screen lg': {
maxWidth: '1280px',
},
'@screen xl': {
maxWidth: '1400px',
},
}
})
}
]
}