Flexbox is one of the most powerful layout tools in CSS, and Tailwind makes it incredibly easy to use. With just a few utility classes, you can create complex, responsive layouts that used to require floats and clearfix hacks.
Enabling flex
Apply flex to a container to make it a flex container. Its direct children become flex items.
<div class="flex">
<div class="bg-blue-100 p-4">Item 1</div>
<div class="bg-blue-200 p-4">Item 2</div>
<div class="bg-blue-300 p-4">Item 3</div>
</div>
Alignment
Tailwind provides utilities for aligning items along both axes.
<!-- Horizontal alignment (main axis) -->
<div class="flex justify-start">Items at start</div>
<div class="flex justify-center">Items centered</div>
<div class="flex justify-end">Items at end</div>
<div class="flex justify-between">Items spread evenly</div>
<div class="flex justify-around">Items with space around</div>
<!-- Vertical alignment (cross axis) -->
<div class="flex items-start">Items at top</div>
<div class="flex items-center">Items vertically centered</div>
<div class="flex items-end">Items at bottom</div>
The classic centering trick
Centering content used to be a rite of passage for CSS developers. With Tailwind, it's one line.
<div class="flex items-center justify-center h-screen">
<p class="text-2xl font-bold">Perfectly centered</p>
</div>
Flex inline
Use inline-flex when you want flex behavior without the container taking full width.
<span class="inline-flex items-center gap-2 bg-gray-100 px-3 py-1 rounded">
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
Online
</span>