The responsive max-width container: .container centers content and caps width at each breakpoint. This family contains 1 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
containerwidth: 100%; @media (min-width: 640px)

Example#

example
html
<div class="container mx-auto px-4">
  <!-- capped width, centered, breathing room -->
</div>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • mx-auto centers; px-4 prevents edge-touching on phones
  • From 3.1, container max-widths follow sm…2xl screens

Common mistakes#

  • Nesting containers — one per layout level is enough

utilities/spacing/margin|Margin · utilities/sizing/width|Width · responsive/index|Responsive