[Feature Request] Responsive Containers

[ThePlayerSD]

Hey there,

So my boss recently asked me if select blocks in the site could break out of the container on anything smaller then XL.
I thought a simple xl:container would do the trick but I then found that it didn't exist.
To add to it I cannot generate responsive container classes from the config.

Please consider adding the responsive variant to the containers.
I love using Tailwind and I would love it if I could do this.
My only work around will be a specific-class for use in these blocks.
Thanks,
1sd15

[filipesmedeiros]

I'm not sure if this is possible, as the container itself already has media queries in it.

It's probably even good to make a class for all these containers that share the same characteristics, and then you can probably @extend .container with SASS on the breakpoints you want. I didn't test this, but should be possible and easy.

[browner12]

This is something I added to Bootstrap awhile ago. It is a very useful feature.

twbs/bootstrap#29118

Would love to see it added to Tailwind as well.

[filipesmedeiros]

Ah this is true! I think this would be fairly trivial, right?

Just add classes .container-sm, etc, that only have media queries from the respective breakpoints, right?
Maybe change this file? https://github.com/tailwindcss/tailwindcss/blob/master/src/plugins/container.js

[adamwathan]

This is actually already possible using max width helpers instead of the container:

<div class="xl:max-w-screen-xl">

The container class is really just a shortcut for this:

<div class="w-full sm:max-w-screen-sm md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-xl">

I don't think I want to add this to core because it would set a weird precedent of having a component class (rather than a utility) that included responsive variants. Going to say no for now but definitely not completely opposed to exploring it again in the future if the max-width solution is insufficient in some way.

[hanneskuettner]

I think with the possibility now to further configure the container, e.g. #1398, this becomes a valid feature request again.

I can definitely think of scenarios where I want some element to respect the configured max-width and padding for container on some breakpoints but not all of them. Having something like w-full md:container is very handy and elegant (at least to me) as it comes with the padding defined in one place for all layouts that have the container enabled.