27

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?

Eddie Dane
  • 1,321
  • 3
  • 13
  • 22
  • This GitHub issue should probably answer your question https://github.com/tailwindlabs/tailwindcss/issues/1102#issuecomment-525386822 – Abdalla Arbab Jun 22 '21 at 09:58

7 Answers7

37

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.

person_v1.32
  • 2,641
  • 1
  • 14
  • 27
  • 2
    I changed my mind about this being THE right solution. Adding new screens sizes actually ADDS a second screen sizes to the container. So the container has the basic tailwind screen size breakpoint PLUS the new breakpoints we have added. – maiakd Feb 06 '23 at 09:38
  • 3
    Agreed, don't use this method - you'll have a bad time. – JCraine Feb 18 '23 at 14:39
  • Beware that `1496px` makes the MBP4 `1514 x 839` to be considered `2xl` and thus makes it use the wider container (the opposite of what we're looking for). `1515px` is a better breakpoint for it. – phaberest Aug 01 '23 at 21:24
11

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

Andreas
  • 430
  • 5
  • 21
Emad Armoun
  • 1,625
  • 2
  • 19
  • 32
  • 3
    This might be the least attractive way to do it, BUT it works like intended. The other answer about changing the `screens` inside the `.container` is actually adding a new unwanted breakpoint so thank you for this one – maiakd Feb 06 '23 at 09:45
  • 1
    It's amazing how much confusion Tailwind introduces for something so rudimentary as custom container sizing. – JCraine Feb 18 '23 at 14:57
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.

Scofield
  • 4,195
  • 2
  • 27
  • 31
3

I found it working this way I put this in src/style.css

@layer components{
  .container {
    @apply max-w-7xl px-4 self-center;
  }
}
Ali Samie
  • 145
  • 2
  • 11
2

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' },
    },
}
Nismi Mohamed
  • 670
  • 1
  • 7
  • 7
2

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

Bello Tomi
  • 513
  • 6
  • 9
0

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;
  }
}
Ali Samie
  • 145
  • 2
  • 11