Flexbox

You know flexbox from the HTML and CSS tutorial. In Tailwind each of its properties became a short class, and the layout is described right in the markup: flex items-center justify-between gap-4.

Turning it on and gaps

flex makes an element a flex container, gap- sets the space between its children on the scale:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex gap-3">
  <div class="bg-indigo-100 p-3">Audio</div>
  <div class="bg-indigo-100 p-3">Speakers</div>
  <div class="bg-indigo-100 p-3">Chargers</div>
</div>

Three blocks stand in a row with 12-pixel gaps. flex-col puts them in a column, gap-x- and gap-y- set the gaps for each axis separately.

Alignment

Class	CSS
`justify-start`	`justify-content: flex-start`
`justify-center`	`justify-content: center`
`justify-between`	`justify-content: space-between`
`justify-end`	`justify-content: flex-end`
`items-start`	`align-items: flex-start`
`items-center`	`align-items: center`
`items-end`	`align-items: flex-end`
`items-stretch`	`align-items: stretch`

The bottom row of the product card — price on the left, button on the right, both vertically centered:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex max-w-xs items-center justify-between rounded-lg border border-gray-200 p-4">
  <span class="text-xl font-bold">$79</span>
  <button class="rounded-lg bg-indigo-600 px-4 py-2 text-sm text-white">Add to cart</button>
</div>

Growing and shrinking

flex-1 lets an item take all the free space, shrink-0 stops it from shrinking. This is how a search bar is built: the field stretches, the button keeps its size:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<form class="flex gap-2">
  <input class="flex-1 rounded-lg border border-gray-300 px-3 py-2" placeholder="Search products">
  <button class="shrink-0 rounded-lg bg-gray-900 px-4 py-2 text-white">Search</button>
</form>

Wrapping

flex-wrap moves items to a new line when they run out of room. For example, a list of tags:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex max-w-xs flex-wrap gap-2">
  <span class="rounded-full bg-gray-100 px-3 py-1 text-sm">Bluetooth</span>
  <span class="rounded-full bg-gray-100 px-3 py-1 text-sm">Noise cancelling</span>
  <span class="rounded-full bg-gray-100 px-3 py-1 text-sm">30 hours</span>
  <span class="rounded-full bg-gray-100 px-3 py-1 text-sm">Fast charging</span>
</div>

Tags that did not fit moved to the next line.

Common mistake

Using items-center or gap-4 without flex:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="items-center justify-between gap-4">
  <span>$79</span>
  <button>Add to cart</button>
</div>

Nothing is aligned: alignment classes only work on a flex or grid container. flex (or grid) always comes first, then the rest.

Thanks for reading!