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 .

[mofodox]

Hi @adamwathan , just wanted to check if we are still possible to do the same container configuration in v4?

[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;
}

[umkasanki]

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

[wongjn]

Add the following to your CSS:

@source not inline("container");