Layout
Containers
We use the Tailwind container for a fixed-width container that "snaps" to each breakpoint. This is in contrast to a "fluid" container that stretches to the full width of the outer container. We find in practice developing to specific breakpoints to be far more efficient than ensuring layout looks perfect at every pixel increment 😅.
container: {
center: true,
padding: {
DEFAULT: '1rem',
md: '2rem',
},
},
Our default setup is to auto-center the container, providing a 1rem x-padding and a 2rem padding after the md breakpoint. Feel free to tailor this to your needs for each project.
<div class="container">
...
</div>
You can also override the padding or any other classes at the template level.
<div class="container px-20">
...
</div>
If you want to use a fluid container, simply omit the .container class and roll your own classes.
<div class="w-full mx-auto px-4 md:px-8">
...
</div>
CSS Grid
An alternative to using a Flexbox-based grid is to use CSS Grid's, made easier with Tailwind's grid classes.
<div class="container">
<div class="grid grid-cols-3 gap-x-8 gap-y-4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
The grid utilities make it super-simple to construct gaps between columns and rows, having columns span multiple rows and more.
<div class="container">
<div class="grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="col-span-2">4</div>
<div>5</div>
<div class="col-span-3">6</div>
</div>
</div>
<div class="container">
<div class="grid grid-cols-6 gap-4">
<div class="col-start-2 col-span-4">1</div>
<div class="col-start-1 col-end-3">2</div>
<div class="col-end-7 col-span-2">3</div>
<div class="col-start-1 col-end-7">4</div>
</div>
</div>
You can also add some non-card-like grids, like the layout for an application with a sidebar.