Configure .container max-width at specific breakpoints - Tailwindcss - html

Question

Please how can I configure tailwind .container max-width at various breakpoints.
Tailwind sets the max-width of the .container equal to the width of the breakpoint by default.
I want to set it to a custom value (a little bit less)
Please how can I do this?

Answer 1

Depending on why you want to set the max-width a bit smaller, there are two configuration options you might want to go for. You can also use both if that's what you want.
If you just want to make the max-width a bit smaller so the content doesn't hug the edges of the screen, you may want to just add some padding. This will add horizontal padding to the inside of your container. You can also configure the container to be centered. Setting a smaller max-width does not prevent the content from reaching the edges, it just makes it do so at a smaller width.
However, if you actually want the max-width to be smaller, you can also configure custom screen sizes with your container. This doesn't seem to be documented for whatever reason, but digging around in the source shows that the container plugin first checks container.screens, then falls back on the normal screens configuration. This lets you configure your container breakpoints without affecting your normal breakpoints.
// tailwind.config.js
module.exports = {
mode: 'jit',
theme: {
container: {
// you can configure the container to be centered
center: true,
// or have default horizontal padding
padding: '1rem',
// default breakpoints but with 40px removed
screens: {
sm: '600px',
md: '728px',
lg: '984px',
xl: '1240px',
'2xl': '1496px',
},
},
},
variants: {},
plugins: [],
}
Check out this Tailwind Play demonstrating these two strategies. You can see the container color change (showing how the normal breakpoint modifiers are not changed) while the container size is smaller.

Answer 2

Also you can define a tailwind plugin, in this way:
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',
},
}
})
}
]
}
resource: https://stefvanlooveren.me/blog/custom-container-width-tailwind-css

Answer 3

You can disable it by setting the container property to false in the corePlugins section of tailwind.config.js
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
container: false,
}
}
You can find it at Tailwind documentation.

Answer 4

This is what I did to solve it
globals.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.container {
#apply minsm:max-w-[640px] minmd:max-w-[768px] minlg:max-w-[1024px] minxl:max-w-[1280px] min2xl:max-w-[1536px];
}
}
tailwind.config.js
theme: {
screens: {
'2xl': { max: '1535px' },
xl: { max: '1279px' },
lg: { max: '1023px' },
md: { max: '767px' },
sm: { max: '639px' },
minsm: { min: '640px' },
minmd: { min: '768px' },
minlg: { min: '1024px' },
minxl: { min: '1280px' },
min2xl: { min: '1536px' },
},
}

Answer 5

I found it working this way
I put this in src/style.css
#layer components{
.container {
#apply max-w-7xl px-4 self-center;
}
}

Answer 6

I just came across this same issue. All the answers so far are good fixes but adding a max width utility class from tailwind CSS was less code and configurations for me.
HTML code
<div class="container max-w-full"> Hello I'm a container </div>
tailwind.config.js
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
You can check out the tailwind documentation for more ways to customize the max width at https://tailwindcss.com/docs/max-width

Answer 7

This is how I managed to do this in /src/input.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
#font-face {
font-family: "BYekan";
src: url("../font/BYekan.ttf");
}
html {
#apply font-BYekan;
}
.container {
#apply max-w-6xl;
}
}