Layout
A 12-column grid, comfortable and compact density, page templates and content widths.
Four named content widths cap a column so lines stay readable and forms stay narrow. Tailwind's default container sizes (max-w-5xl and friends) are disabled; use these instead. They do not change with density.
The four widths
Each bar is capped by its container, and by the main column on narrower screens.
max-w-prose · 720pxReading text: docs, help, long descriptions.
max-w-form · 640pxSingle-column forms and settings.
max-w-page · 1280pxThe default page content width.
max-w-wide · 1536pxWide tables and dashboards on large screens.
Tokens
| Token | Comfortable | Compact | Utility |
|---|---|---|---|
| layout.container.prose | 720px | same | max-w-prose |
| layout.container.form | 640px | same | max-w-form |
| layout.container.page | 1280px | same | max-w-page |
| layout.container.wide | 1536px | same | max-w-wide |