Tailwindcss: 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

[TuringJest]

@bugproof

well, the tailwind container could just come with the max-widths by default, then you don't have to pollute the config with a custom plugin for something that I guess most people would need anyway.
But maybe I'm overestimating the usefulness.

[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 :)

[webcoderkz]

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