Flexbox & Grid

Code

<!-- Flexbox centering -->
<div class="flex items-center justify-center min-h-screen">
  <div class="bg-white p-8 rounded shadow">Centered</div>
</div>

<!-- Space between -->
<div class="flex justify-between items-center">
  <span>Left</span>
  <span>Right</span>
</div>

<!-- CSS Grid -->
<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">Spans two columns</div>
  <div>One</div>
</div>

<!-- Auto-fit responsive grid without media queries -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
  <div>Item</div>
</div>

Explanation

Tailwind maps flexbox and grid properties to utilities: flex, items-center, justify-center, grid-cols-3, gap-4. Arbitrary values like grid-cols-[repeat(auto-fit,minmax(200px,1fr))] enable CSS features not in the default scale. col-span-2 controls how many tracks an item occupies.

More Tailwind CSS Snippets