[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.

[gskierk]

It still occurs on v4.0.0 for SvelteKit + Vite. It works for npm run dev command, but the container lost its styling when running npm run build && npm run preview. The workaround is to move the styling outside @theme.

@import 'tailwindcss';

.container {
  margin-inline: auto;
  padding-inline: 1rem;
}

@theme {
  // ...
}

[smnbbrv]

@gskierk I have the very same thing with astro, it works in dev mode and fails on prod. And same workaround.

Interestingly, I have another astro project with very similar structure, almost same deps and same versions of libs. And there the container preserves the margins and paddings in prod mode. Cannot explain this

[mountainash]

Cannot explain this

I've noticed that the TW "--minify" option (often done on Production and not Dev - for speed reasons), can change the order of declarations within the CSS and therefore leads to changes in specificity (meaning that things are overridden or not) that can be different from when not minified.

[santhoo]

Cannot explain this

I've noticed that the TW "--minify" option (often done on Production and not Dev - for speed reasons), can change the order of declarations within the CSS and therefore leads to changes in specificity (meaning that things are overridden or not) that can be different from when not minified.

Same here. In Dev max-width-screen-xl works fine. After build max-width: var(--breakpoint-xl); loses priority.

@utility container-size {
  @apply container max-w-screen-xl mx-auto;
}

@utility container-wrap {
  @apply container-size px-4 md:px-8;
}

• "tailwindcss": "^4.0.7"
• "astro": "^5.3.0"

[cp-bwg]

Cannot explain this

I've noticed that the TW "--minify" option (often done on Production and not Dev - for speed reasons), can change the order of declarations within the CSS and therefore leads to changes in specificity (meaning that things are overridden or not) that can be different from when not minified.

Same here. In Dev max-width-screen-xl works fine. After build max-width: var(--breakpoint-xl); loses priority.

@Utility container-size {
@apply container max-w-screen-xl mx-auto;
}

@Utility container-wrap {
@apply container-size px-4 md:px-8;
}

• "tailwindcss": "^4.0.7"
• "astro": "^5.3.0"

Did you ever find a solution?

[santhoo]

@cp-bwg I ended using the important flag:

@utility container-size {
  @apply container max-w-screen-xl! mx-auto;
}