Custom max-width for container

[Jonarod]

I need to tweak max-width for each .container breakpoints.

In fact, I would prefer to use these:

Class	Breakpoint	Properties
.container	None	width: 100%;
sm (640px)	max-width: 600px;
md (768px)	max-width: 700px;
lg (1024px)	max-width: 800px;
xl (1280px)	max-width: 900px;

But I couldn't find a way to achieve that using tailwind.config.js.

[adamwathan]

The best way to do this at the moment is to disable the default container plugin and write the CSS for the container yourself, or provide it as your own custom plugin:

module.exports = {
  // ...
  corePlugins: {
    container: false
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.container': {
          maxWidth: '100%',
          '@screen sm': {
            maxWidth: '600px',
          },
          '@screen md': {
            maxWidth: '700px',
          },
          '@screen lg': {
            maxWidth: '800px',
          },
          '@screen xl': {
            maxWidth: '900px',
          },
        }
      })
    }
  ]
}

[Jonarod]

Nice ! I was about to rewrite all my components using some md:max-w-lg mx-auto ... logic. Thank you !

[TuringJest]

Why not allow to overwrite maxWidth values in the config instead? I thought this feels kind of like the tailwind way?

container: 
  center: true,
  maxWidth: {
    'md': '700px'
}

[bugproof]

container doesn't work with max-width breakpoints, it's 100% all the time, no way to change that behaviour because of that https://tailwindcss.com/docs/breakpoints/#max-width-breakpoints

[adamwathan]

I'd be open to a PR that added support for this, but I personally think matching breakpoints + some horizontal padding is all you really need for most situations. I find that to be a cleaner solution than settings a max-width of 1240px on 1280px screens for example.

The main use-case for customizing it in my opinion is sidebar layouts, where you might want a container just for your content area so you need to subtract the width of the sidebar from your breakpoints.

[codemonkeynorth]

the reason for needing this (just to give an extra use case) is I have some elements that are eg xl:w-6\12 but they're too narrow at around ~1200px screen width. there's quite a big difference between 1200 and 1920! but xl only covers up to 1200, so I added an xxl @ 1440px so I had a bit more control (eg xl:w-8/12 xxl:w-6/12)

however it didn't mean i want my container to be any wider than the actual 1200px it is by default (for xl)

think of 1200px as "max site width" in this case (for contained sections at least)

for now i've just thrown this in though

@media (min-width: 1440px) {
  .container {
    max-width: 1200px;  
  }
}

thanks

[RomainMazB]

Just to add another use case: I'm currently migrating a website from a CMS to another for a client and he want me to make a perfect copy of its webdesign which uses a 1200px width layout.

TailwindCSS is friendly for customization with near from every components, I was surprised to see .container is not part of them.

@adamwathan's previous trick contains a little error: the default (without-breakpoint) property in the default .container class is not maxWidth but width set to 100% Here is the corrected full default container class, with also the default available customization(just uncomment and customize the margin and padding):

module.exports = {
  // ...
  corePlugins: {
    container: false
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.container': {
          width: '100%',
          // marginLeft: 'auto',
          // marginRight: 'auto',
          // paddingLeft: '2rem',
          // paddingRight: '2rem',
          '@screen sm': {
            maxWidth: '640px',
          },
          '@screen md': {
            maxWidth: '768px',
          },
          '@screen lg': {
            maxWidth: '1024px',
          },
          '@screen xl': {
            maxWidth: '1280px',
          },
        }
      })
    }
  ]
}

[bluwy]

Just to add, v1.3.0 now supports breakpoint-specific padding for containers and can be used to indirectly set the max-width. Not the best workflow but it's currently the best option without resulting to writing a plugin.

[jorher]

Hey there, I found this solution

module.exports = {
  theme: {
    container: {
      screens: {
         sm: "100%",
         md: "100%",
         lg: "1024px",
         xl: "1280px"
      }
    }
  }
}

with this you don't have to create a new container. Hope it helps :)

[avxkim]

@adamwathan how about @jorher approach? Is it fine?

[isramv]

Hey there, I found this solution

module.exports = {
  theme: {
    container: {
      screens: {
         sm: "100%",
         md: "100%",
         lg: "1024px",
         xl: "1280px"
      }
    }
  }
}

with this you don't have to create a new container. Hope it helps :)

This should be added to the documentation :tada:

[8bu]

Hey there, I found this solution

module.exports = {
  theme: {
    container: {
      screens: {
         sm: "100%",
         md: "100%",
         lg: "1024px",
         xl: "1280px"
      }
    }
  }
}

with this you don't have to create a new container. Hope it helps :)

how's it still not in the document?

[stoplion]

☝🏼 that doesn't work for me

[PSoltes]

Hey there, I found this solution

module.exports = {
  theme: {
    container: {
      screens: {
         sm: "100%",
         md: "100%",
         lg: "1024px",
         xl: "1280px"
      }
    }
  }
}

with this you don't have to create a new container. Hope it helps :)

This should be added to the documentation

This also sets the breakpoint to the value you want the container to be, also you can't set None width

[NicoHood]

Can we have a clear answer about this container thing? It is completely missing in the docs and the above suggestion also does not work for me. I guess that is a common usecase to set a global website container width.

The issue what @PSoltes described above can be seen in this simple example:

    container: {
      screens: {
        bla: "500px",
        bli: "1000px"
      }
    },

The name does not matter. The container functions as breakpoint itself. If the size is smaller than a possible container width, the next smaller version gets used. That is not what we wanted in first place.

I found the solution of @RomainMazB better. As an alternative you could use max-w-[1000px] with the new tailwind jit.

[PixelJanitor]

Can we have a clear answer about this container thing? It is completely missing in the docs and the above suggestion also does not work for me. I guess that is a common usecase to set a global website container width.

The issue what @PSoltes described above can be seen in this simple example:

    container: {
      screens: {
        bla: "500px",
        bli: "1000px"
      }
    },

The name does not matter. The container functions as breakpoint itself. If the size is smaller than a possible container width, the next smaller version gets used. That is not what we wanted in first place.

I found the solution of @RomainMazB better. As an alternative you could use max-w-[1000px] with the new tailwind jit.

You have to make sure to override the existing container names. bla and bli are not the existing. In @jorher's example you'll see that his screen's object specifically overrides the tailwind screen class name breakpoints. Can confirm this works - with JIT as well.

[leoortiz]

Can we have a clear answer about this container thing? It is completely missing in the docs and the above suggestion also does not work for me. I guess that is a common usecase to set a global website container width.

The issue what @PSoltes described above can be seen in this simple example:

    container: {
      screens: {
        bla: "500px",
        bli: "1000px"
      }
    },

The name does not matter. The container functions as breakpoint itself. If the size is smaller than a possible container width, the next smaller version gets used. That is not what we wanted in first place.

I found the solution of @RomainMazB better. As an alternative you could use max-w-[1000px] with the new tailwind jit.

Don't know if that's your case, but I tried it in a Next.js project and it only worked after the dev process was restarted.

[PSoltes]

Can we have a clear answer about this container thing? It is completely missing in the docs and the above suggestion also does not work for me. I guess that is a common usecase to set a global website container width. The issue what @PSoltes described above can be seen in this simple example:

    container: {
      screens: {
        bla: "500px",
        bli: "1000px"
      }
    },

The name does not matter. The container functions as breakpoint itself. If the size is smaller than a possible container width, the next smaller version gets used. That is not what we wanted in first place. I found the solution of @RomainMazB better. As an alternative you could use max-w-[1000px] with the new tailwind jit.

Don't know if that's your case, but I tried it in a Next.js project and it only worked after the dev process was restarted.

The thing i am talking about is when i set it in container screens in tailwind config. Breakpoint is also set to that value. For example with tailwind config like this container: { screens: { DEFAULT: "100%", xs: "380px", sm: "640px", md: "768px", lg: "1024px", xl: "1200px", "2xl": "1450px", }, },

generated css is like

[adamwathan]

There is no way to change the container width based on the screen size other than to configure the padding, no plans to change this currently.

The screens option in the container plugin is very old, and for backwards compatibility reasons behaves as described, where the width is always equal to the breakpoint, even when setting custom screens values.

If someone wanted to PR a new option like sizes or something that was a map of screenName -> custom max width I would be open to reviewing it.

[IsraelOrtuno]

What about doing this?

  plugins: [
    plugin(function({addComponents, config}) {
      addComponents({
        '.container': {
          'max-width': config('theme.maxWidth.2xl')
        }
      })
    })
  ],

[Showrin]

Hey there, I found this solution

module.exports = {
  theme: {
    container: {
      screens: {
         sm: "100%",
         md: "100%",
         lg: "1024px",
         xl: "1280px"
      }
    }
  }
}

with this you don't have to create a new container. Hope it helps :)

This should be added to the documentation 🎉

This solution saved my day 😅 Thanks so much @jorher I think this should be added in the doc.

[webcat12345]

Hey there, I found this solution

module.exports = {
  theme: {
    container: {
      screens: {
         sm: "100%",
         md: "100%",
         lg: "1024px",
         xl: "1280px"
      }
    }
  }
}

with this you don't have to create a new container. Hope it helps :)

This works awesome.

[zzseba78]

Hey there, I found this solution

module.exports = {
  theme: {
    container: {
      screens: {
         sm: "100%",
         md: "100%",
         lg: "1024px",
         xl: "1280px"
      }
    }
  }
}

with this you don't have to create a new container. Hope it helps :)

Works like a charm, thank you!

[prafulla-inx]

What if you want to do this way:

module.exports = { theme: { container: { screens: { sm: "90%", md: "80%", lg: "85%", xl: "1280px" } } } }

It doesn't seem to be working, in all cases it gives, 100% excep when you give in 'px'.

[anthonygedeon]

@prafulla-inx yep, I'm running into the same issue, whatever you change the value to it defaults to 100%

container: {
    screens: {
         sm: "700px"
    }
},

[zanfee]

Percentages don't work here. The screen attribute overrides breakpoints for the container class. Breakpoints like 80% don't make sense, instead there will be no breakpoint. So additional attributes like custom padding will also not work for these breakpoints.

[onikaii]

Percentages don't work here. The screen attribute overrides breakpoints for the container class. Breakpoints like 80% don't make sense, instead there will be no breakpoint. So additional attributes like custom padding will also not work for these breakpoints.

same problem here, Percentages don't work any solution?

[rutpshah]

I have solved this way:

tailwind.config.js: module.exports = { theme: { container: { screens: { 'mobile': '1440px', 'tablet': '1440px', 'desktop': '1440px' }, }, }, }

html: <div class="container"></div>

[popuguytheparrot]

this solution not working in 3.2.4 for me

module.exports = {
  theme: {
    container: {
      screens: {
         sm: "100%",
         md: "100%",
         lg: "1024px",
         xl: "1280px"
      }
    }
  }
}

[phatify]

this is what you need:

    ...
    theme: {
        container: {
            center: true,
            padding: '1rem', 
            screens: {
                sm: '640px',
                md: '768px',
                lg: '1024px',
                xl: '1200px',
                '2xl': '1200px', 
            },
        },
    },
    ...

[MaideAkdede]

Hey there, I found this solution

module.exports = {
  theme: {
    container: {
      screens: {
         sm: "100%",
         md: "100%",
         lg: "1024px",
         xl: "1280px"
      }
    }
  }
}

with this you don't have to create a new container. Hope it helps :)

:warning: It does NOT WORK properly like intended :warning:

People haven't tested this thoroughly, it might LOOK like it works, but it doesn't. This method creates TWO min-width to the container. Such as :

@media (min-width: 768px)
@media (min-width: 1496px)
<style>
.md\:container {
    max-width: 1496px;
}

So the .container take the screen sizes of the Basic TAILWIND config + the screen sizes we entered

[westtrade]

Hey there, I found this solution

module.exports = {
  theme: {
    container: {
      screens: {
         sm: "100%",
         md: "100%",
         lg: "1024px",
         xl: "1280px"
      }
    }
  }
}

with this you don't have to create a new container. Hope it helps :)

⚠️ It does NOT WORK properly like intended ⚠️

People haven't tested this thoroughly, it might LOOK like it works, but it doesn't. This method creates TWO min-width to the container. Such as :

@media (min-width: 768px)
@media (min-width: 1496px)
<style>
.md\:container {
    max-width: 1496px;
}

So the .container take the screen sizes of the Basic TAILWIND config + the screen sizes we entered

Agree. This method is broken

[bizmich]

sm: "100%", md: "100%", lg: "1024px", xl: "1280px"

but its not working with percent

[lxl-sql]

/** tailwindcss.config.js */ export default { theme: { screens: { container: "100%", } }, }

[axelthat]

@MaideAkdede I don't see two min-width's anymore.

[sovitranjitkar]

If anyone needs commonly used dimensions of 960px and 1024px, here is the code:

module.exports = {
    // ...
    theme: {
        extend: {
            screens: {
                lg: '990px',
                xl: '1054px',
            },
        },
    },
    corePlugins: {
        container: false
    },
    plugins: [
        function ({ addComponents }) {
            addComponents({
                '.container': {
                    width: '100%',
                    marginInline: 'auto',
                    paddingInline: '15px',
                    '@screen sm': {
                        maxWidth: '610px',
                        paddingInline: '0',
                    },
                    '@screen md': {
                        maxWidth: '738px',
                        paddingInline: '0',
                    },
                    '@screen lg': {
                        maxWidth: '960px',
                        paddingInline: '0',
                    },
                    '@screen xl': {
                        maxWidth: '1024px',
                        paddingInline: '0',
                    },
                }
            })
        }
    ],
} 

which will output as:

.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 15px;
}
@media (min-width: 640px) {
    .container {
        max-width: 610px;
        padding-inline: 0;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 738px;
        padding-inline: 0;
    }
}
@media (min-width: 990px) {
    .container {
        max-width: 960px;
        padding-inline: 0;
    }
}
@media (min-width: 1054px) {
    .container {
        max-width: 1024px;
        padding-inline: 0;
    }
}

OR if you need a fluid container with a maximum width of 1024px

module.exports = {
    // ...
    theme: {
        extend: {
            screens: {
                xl: '1054px',
            },
        },
    },
    corePlugins: {
        container: false
    },
    plugins: [
        function ({ addComponents }) {
            addComponents({
                '.container': {
                    width: '100%',
                    paddingInline: '15px',
                    '@screen xl': {
                        maxWidth: '1024px',
                        marginInline: 'auto',
                        paddingInline: '0',
                    },
                }
            })
        }
    ],
}

which will output as:

.container {
    width: 100%;
    padding-inline: 15px;
}
@media (min-width: 1054px) {
    .container {
        max-width: 1024px;
        margin-inline: auto;
        padding-inline: 0;
    }
}

[Giusti]

It seems this issue is still not fixed, even though it was closed

• container screens still creates additional min-width breakpoints which define a matching max-width for the container.
• without custom plugin changes or abusing padding it is not possible to define a custom max-width for a certain breakpoint
• if backwords compatibility is an issue why not introduce a maxWidth utility for the container and leave the existing screens as is ?