how can i customize container width in tailwind-css?

Question

tailwind CSS container width in 2xl is not desired for me . how can I change it ?

I want to remove its default width in 2xl . How can I do it?

Answer 1

Or if you need some custom solution not directly connected with your "screens" configuration (as suggested by JHeth) you can configure container behavior separately like this:

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

Answer 2

Add only necessary breakpoints to tailwind.config.js. Default values you can see in tailwind theme config

module.exports= {
    theme: {
        screens: {
            'sm': '640px', // => @media (min-width: 640px) { ... }
            'md': '768px', // => @media (min-width: 768px) { ... }
            'lg': '1024px', // => @media (min-width: 1024px) { ... }
            'xl': '1280px', // => @media (min-width: 1280px) { ... }
        }
    }
}