Configure .container max-width at specific breakpoints - Tailwindcss

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.