[v4] Can't remove max-width on container utility

[sntran]

What version of Tailwind CSS are you using?

v4.0.0-beta.1

What build tool (or framework if it abstracts the build tool) are you using?

@tailwindcss/[email protected]

What version of Node.js are you using?

v20

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/2Gw5xBur52?file=css

Describe your issue

I have custom container utility that uses grid instead of max width and margin so I can break out of it when I need to.

Unfortunately, after upgrading to beta.1 from alpha.29, there are now generated rules for .container with max-width set on different breakpoints. Even setting max-w-none in my utility does not remove it, and I don't want to do md:max-w-none lg:max-w-none ... to override all the breakpoints.

[philipp-spiess]

Yeah that utility now clashes with our fallback for the v3 container component now, sorry!

You can unset that behavior via a custom media query overwrite. Our v4 recommendation is to not use the container name for your utility though but for compatibility, this should work:

@utility container {
  @media (width >= 40rem) {
    @apply max-w-none;
  }
}

[sntran]

It'd be very hard to rename it on a big project, especially when it's the main control of layout. It's also a utility so it can be @apply in other utilities or components.

[adamwathan]

Were you using v3 on this project before and disabling the container component using the corePlugins option?

[sntran]

Correct. I have always disabled the built-in container in projects using v3.

But the projects I'm working on have been on v4.alpha since the start.

[adamwathan]

Does this solution work for your needs?

https://play.tailwindcss.com/u0Wa8T7tzY?file=css

Or do you actually need your custom container to be defined as a utility so you can combine it with variants like md:container? If so this solution might work:

https://play.tailwindcss.com/q4Z8RhOgvr?file=css

[sntran]

Or do you actually need your custom container to be defined as a utility so you can combine it with variants like md:container? If so this solution might work:

https://play.tailwindcss.com/q4Z8RhOgvr?file=css

Yes, I do want it as utility. Making multiple @utility calls work for me. Did not know that they are composed into one, but I'd hate to think about the specificity and where the styles are in the output.

By the way, I don't even needed to use @media to reset the max-width: https://play.tailwindcss.com/qldd9h3gC8?file=css

[zipper]

@adamwathan Is this still the best and only solution to the problem? I consider this very unfortunate - it may work, but it actually generates dead code, which is the worst possible outcome. Do you consider making it possible to remove the default styles for this (or any other) utility? Basically to allow not only extending existing utilities, but also overriding them. Btw when extending the utilities, it also doesn't generate the cleanest code, since the class is outputted twice - first time with default TW styles and second time with the extending styles.

The container class name is very common in web development, but usually is meant to do something a bit different. We don't want it to be fixed size at certain breakpoints. That behaviour makes no sense for us, but our only option for now is this dead code generated (and then max-w-* would probably won't work anyway), or turn the utility off all together via @source not, but then we cannot use the name at all. Kind of makes the Tailwind v4 less awesome for me.

I can still use something like max-width: revert-layer, or think of other similar solutions, but all of those would keep the default code in place even though it would never be applied.