[v4] Styles are not applied to the "container" class

[devcaeg]

What version of Tailwind CSS are you using?
v.next

What build tool (or framework if it abstracts the build tool) are you using?
vite (v5.1.5), @builder.io/qwik (v1.5.1), @builder.io/qwik-city (v1.5.1), @tailwindcss/vite (v.next)

What version of Node.js are you using?
v20.9.0

What browser are you using?
Chrome, Safari, Edge

What operating system are you using?
macOS

Reproduction URL
https://codesandbox.io/p/devbox/peaceful-hertz-jx9sd2?file=%2Fsrc%2Froutes%2Findex.tsx

Describe your issue

In TailwindCSS version 4, it seems that the styles of the "container" class are not loaded. In previous versions the "container" class works correctly.

[dhalucario]

I am using SvelteKit and I can comfirm this.

[gaetansenn]

Using Vite with nuxt with same problem

[francoismassart]

I guess it is not implemented yet, I don't see it in the packages/tailwindcss/src/utilities.ts.

[devcaeg]

@adamwathan

Has any decision been made regarding adding this class? I think it is a very useful and widely used class.

[Matheun]

What could we use to replace the container while you guys figure out how to tackle the inclusion of the container?

[terciodejesus]

up

[aaronadamsCA]

I made the below suggestion in closed PR #13395 (comment), but I think it's more relevant here:

maybe the real ask here is a better, simpler v4 container utility. The v3 utility was for one very specific use case, whereas I could imagine v4 utilities that are both a lot simpler and a lot more like the rest of Tailwind:

.container-sm {
  width: 100%;
  max-width: var(--breakpoint-sm);
}

.container-md {
  width: 100%;
  max-width: var(--breakpoint-md);
}

/* etc. */

Users could easily recreate the v3 container utility themselves, including all of its configuration options:

@utility container {
  /* Set the `max-width` to match the `min-width` of the current breakpoint */
  @apply sm:container-sm md:container-md lg:container-lg xl:container-xl 2xl:container-2xl;

  /* Center by default */
  @apply mx-auto;

  /* Add horizontal padding */
  @apply px-4 sm:px-8;
}

[philipp-spiess]

Hey folks! We've decided to bring back the container component as a utility: #14993

One change though is that we do want to make the configuration more CSS-y. In order to make it centered or padded, you can do this now by creating a custom container utility to extend the default one, e.g.:

@import "tailwindcss";

@utility container {
  margin-inline: auto;
  padding-inline: 1rem;

  @media (width >= theme(--breakpoint-sm)) {
    padding-inline: 2rem;
  }
}

We will be following-up with some work to make the change backward compatible with your existing v3 JS config, including a codemod that you can run to migrate the v3 JS config to CSS.