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

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?

htmlcsstailwind-css


Solution 1:[1]

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.

Solution 2:[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' },
    },
}

Solution 3:[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;
  }
}

Solution 4:[4]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 stifler97
Solution 4 Emad Armoun

Related Questions