Back

Flexbox and Grid utilities

Tailwind has utility classes for Flexbox and Grid so you can build layouts without writing CSS. Use flex for one direction (a row or a column). Use grid for rows and columns together. Add breakpoints like md: to change the layout on bigger screens.

<!-- Flex row, centered, with a gap -->
<div class="flex items-center justify-between gap-4">
  <span>Logo</span>
  <nav>Links</nav>
</div>

<!-- Column on mobile, row on desktop -->
<div class="flex flex-col gap-6 md:flex-row">...</div>

<!-- 1 column on mobile, 3 on desktop -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

Roadmap