Customize the .container utility class sizes in v4?

[octoxan]

Seems there's nothing in the docs for this in v4, only results for "container" are trying to sell Tailwind UI and stuff about unrelated container queries.

So I've customized all my breakpoints, but .container for some reason does not listen to those.

Is this correct, or broken?

I tried this just to test it out:

@theme {
  --breakpoint-md: 20rem;
  --breakpoint-lg: 50rem;
  --breakpoint-xl: initial;
  --breakpoint-2x: initial;
}

which results in this still:

.container {
        width: 100%
    }

    @media(min-width: 40rem) {
        .container {
            max-width:40rem
        }
    }

    @media(min-width: 48rem) {
        .container {
            max-width:48rem
        }
    }

    @media(min-width: 96rem) {
        .container {
            max-width:96rem
        }
    }

I need these to be for example 20rem and 50rem. (made up numbers I'll figure out exacts once I get it actually functioning).

[wongjn]

Seems to be different in Tailwind Play but otherwise works as I expect:

.container {
  width: 100%;
  @media (width >= 20rem) {
    max-width: 20rem;
  }
  @media (width >= 40rem) {
    max-width: 40rem;
  }
  @media (width >= 50rem) {
    max-width: 50rem;
  }
  @media (width >= 96rem) {
    max-width: 96rem;
  }
}

• 20rem corresponds to your --breakpoint-md.
• 40rem corresponds to the default --breakpoint-sm.
• 50rem corresponds to your --breakpoint-lg.
• 96rem corresponds to the default --breakpoint-2xl (you have --breakpoint-2x where you may have meant --breakpoint-2xl).

---

Regardless, you may not wish to affect --breakpoint-* namespaces since that will affect everything else. So as an alternative:

@utility container {
  /* Reset `max-width`s */
  max-width: none;

  @media (width >= 20rem) {
    max-width: 20rem;
  }

  @media (width >= 50rem) {
    max-width: 50rem;
  }
}

[ayonpaul8906]

In Tailwind CSS v4, if you want full control over the .container utility without affecting other parts of your theme, the best approach is to redefine it using the new @utility directive.

This allows you to reset the max-width and define your exact desired breakpoints:

@theme {
  --breakpoint-md: 20rem;
  --breakpoint-lg: 50rem;
  /* Ensure 2xl is set to initial if you want to remove it */
  --breakpoint-2xl: initial;
}

@utility container {
  margin-inline: auto; /* Center the container */
  width: 100%;
  max-width: none; /* Reset existing max-widths */

  @media (width >= --theme(--breakpoint-md)) {
    max-width: var(--theme(--breakpoint-md));
  }

  @media (width >= --theme(--breakpoint-lg)) {
    max-width: var(--theme(--breakpoint-lg));
  }
}

Why this works:

• @utility: This explicitly overrides the built-in .container class.

• max-width: none: This clears out any default max-width styles from the standard Tailwind container.

• --theme(--breakpoint-*): This ensures your container stays in sync with your custom theme variables.

Using this method, you avoid the "greediness" of default breakpoints (like the 96rem you were seeing) by only defining the specific ones you need).