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