where did the container go in v4?

[MrOxMasTer]

where did the container go in v4? Or has it been replaced by the CSS container @container?

theme: {
container: {
center: true,
padding: {
DEFAULT: '0.5rem',
sm: '0.5rem',
mm: '1rem',
mt: '4rem',
md: '5rem',
},
},
}

[wongjn]

There is an open issue regarding this, see #13129. Also of note, there was a PR to add it into v4, but was closed without merge with reasoning at #13391 (comment).

As an aside, @container is not analagous to container.

[aniruddhaadak80]

Hi @MrOxMasTer ,

In Tailwind CSS v4, the concept of the container utility has been enhanced with support for CSS containers. While the traditional container utility is still available, you can now utilize the new CSS container feature by using the @container directive for more responsive designs.

Here's how you can define a container in your tailwind.config.js:

theme: {
  container: {
    center: true,
    padding: {
      DEFAULT: '0.5rem',
      sm: '0.5rem',
      mm: '1rem',
      mt: '4rem',
      md: '5rem',
    },
  },
}

You can still use the container utility as before, and the new CSS @container feature allows for more advanced styling. If you need to replace the utility with the CSS approach, ensure to check the official documentation for detailed usage.

Let me know if you have any further questions!

Thanks .

[wongjn]

Yep, see https://tailwindcss.com/docs/upgrade-guide#container-configuration

[gribbl]

And how do we define padding and container width based on breakpoints?

[wongjn]

You'd write CSS for it within a @utility like:

@utility container {
  padding-inline: 1rem;

  @variant sm {
    …
  }

  @variant md {
    …
  }
}

[ayan878]

By using utility class it changes margin and padding inside the div where the container is define but doest effect container itself

@Utility container {
margin-inline: auto;
padding-inline: 2rem;
}

[devSubham35]

Use this to resize the container - "container max-w-6xl"

[umkasanki]

Could someone clarify how to disable container in the TailwindCSS v4?
Thanks

[wongjn]

Add the following to your CSS:

@source not inline("container");

[zipper]

@wongjn But then you can’t use this utility name (or, more generally, the class name container) anywhere - even in other layers - which is rather unfortunate 🙁. While this doesn’t matter for 99% of utility names (since no one usually wants to change the behavior of something like flex), the name container isn’t actually tied to a specific CSS property, which breaks the utility paradigm a bit. I’ve always thought of it more as a simple component (or better yet, a "layout class") so it would make sense to be able to opt out of the default Tailwind definition of this component, as was possible in Tailwind v3.

[wongjn]

You could consider forking the project to suit your needs.

[smith558]

Why is it not in the docs anymore if it's still supported?

[wongjn]

It is mentioned in the upgrade guide at least. Though generally, if something is not in the docs, it is considered deprecated.

[smith558]

I've found it now, it's a bit hidden here (https://tailwindcss.com/docs/max-width#using-breakpoints-container). Doesn't mention anything about deprecation, though. 🤔

[wongjn]

Ah, well found! Yep, so it is in the docs so not considered deprecated 👍

[devSubham35]

Use this to resize the container - "container max-w-6xl"