IContainer ​

A centred, max-width wrapper with the page's horizontal gutter. Use one per page region instead of repeating mx-auto max-w-… px-… by hand.

<IContainer size="lg">
  <IPageHeader title="Invoices" />
  <ITable :columns="columns" :rows="rows" />
</IContainer>

Sizes ​

Every size is wider than this column, so the five are drawn to scale against xl:

<IContainer size="sm">…</IContainer>
<IContainer size="xl">…</IContainer>

A container caps a whole page. For a readable line length, constrain the text itself inside one.

Gutter ​

The gutter is the horizontal padding that keeps content off the window edge. Each one is a ramp rather than a number — md is px-4 on a phone, px-6 from sm, px-8 from lg — because a single value has to pick a side: enough room on a wide window leaves a phone with no width left for the content itself.

none is for when the child draws its own gutter — a full-bleed image, or a table that should touch the edges on a phone. Take none and set your own class when you want one fixed value at every width.

<IContainer gutter="none">
  <img src="/hero.jpg" alt="">
</IContainer>

Inside the app shell ​

IAppShell sets no width of its own. Put a container inside its main region:

<IAppShell>
  <template #sidebar>
    <ISidebar :items="sections" />
  </template>

  <IContainer class="py-8">
    <IPageHeader title="Invoices" />
    <ITable :columns="columns" :rows="rows" />
  </IContainer>
</IAppShell>

Props ​

The widths come from Tailwind v4's width scale.