Tailwind CSS Cheatsheet

Flexbox

Use this Tailwind CSS reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

Enabling Flexbox

<div class="flex">...</div>
<div class="inline-flex">...</div>

Flex Direction

Class	CSS
`flex-row`	`flex-direction: row` (default)
`flex-row-reverse`	`flex-direction: row-reverse`
`flex-col`	`flex-direction: column`
`flex-col-reverse`	`flex-direction: column-reverse`

<div class="flex flex-col md:flex-row gap-4">
  <div>Stacked on mobile, side-by-side on md+</div>
  <div>Second item</div>
</div>

Flex Wrap

Class	CSS
`flex-nowrap`	`flex-wrap: nowrap` (default)
`flex-wrap`	`flex-wrap: wrap`
`flex-wrap-reverse`	`flex-wrap: wrap-reverse`

<div class="flex flex-wrap gap-2">
  <span class="px-3 py-1 bg-blue-100 rounded-full">Tag 1</span>
  <span class="px-3 py-1 bg-blue-100 rounded-full">Tag 2</span>
  <span class="px-3 py-1 bg-blue-100 rounded-full">Tag 3</span>
</div>

Justify Content (Main Axis)

Class	CSS
`justify-start`	`justify-content: flex-start`
`justify-end`	`justify-content: flex-end`
`justify-center`	`justify-content: center`
`justify-between`	`justify-content: space-between`
`justify-around`	`justify-content: space-around`
`justify-evenly`	`justify-content: space-evenly`
`justify-stretch`	`justify-content: stretch`
`justify-normal`	`justify-content: normal`
`justify-baseline`	`justify-content: baseline`

<!-- Spread nav items -->
<nav class="flex justify-between items-center px-6 py-4">
  <a href="/">Logo</a>
  <ul class="flex gap-6">...</ul>
</nav>

Align Items (Cross Axis)

Class	CSS
`items-start`	`align-items: flex-start`
`items-end`	`align-items: flex-end`
`items-center`	`align-items: center`
`items-baseline`	`align-items: baseline`
`items-stretch`	`align-items: stretch` (default)

Align Content (Multi-row Cross Axis)

Only has effect when there are multiple rows (flex-wrap).

Class	CSS
`content-start`	`align-content: flex-start`
`content-end`	`align-content: flex-end`
`content-center`	`align-content: center`
`content-between`	`align-content: space-between`
`content-around`	`align-content: space-around`
`content-evenly`	`align-content: space-evenly`
`content-stretch`	`align-content: stretch`
`content-normal`	`align-content: normal`
`content-baseline`	`align-content: baseline`

Align Self (Individual Item Cross Axis)

Overrides align-items for a single child.

Class	CSS
`self-auto`	`align-self: auto`
`self-start`	`align-self: flex-start`
`self-end`	`align-self: flex-end`
`self-center`	`align-self: center`
`self-stretch`	`align-self: stretch`
`self-baseline`	`align-self: baseline`

<div class="flex items-start h-32">
  <div class="self-center">Vertically centered</div>
  <div class="self-end">Pinned to bottom</div>
</div>

Flex Grow and Shrink

Class	CSS
`grow`	`flex-grow: 1`
`grow-0`	`flex-grow: 0`
`shrink`	`flex-shrink: 1`
`shrink-0`	`flex-shrink: 0`
`shrink-[2]`	`flex-shrink: 2`

<!-- Sidebar + fluid main -->
<div class="flex">
  <aside class="w-64 shrink-0">Sidebar</aside>
  <main class="grow min-w-0">Main content (grows to fill)</main>
</div>

min-w-0 on grow children prevents overflow when content is wider than the available space.

Flex Basis

Sets the initial main-size of a flex item before grow/shrink.

<div class="flex">
  <div class="basis-1/3">33%</div>
  <div class="basis-2/3">67%</div>
</div>

Pattern	Example	Value
Fixed size	`basis-64`	`16rem`
Fraction	`basis-1/2`	`50%`
Full	`basis-full`	`100%`
Auto	`basis-auto`	`auto`
Zero	`basis-0`	`0px`
Arbitrary	`basis-[200px]`	`200px`

Flex Shorthand

Class	CSS
`flex-1`	`flex: 1 1 0%`
`flex-auto`	`flex: 1 1 auto`
`flex-initial`	`flex: 0 1 auto`
`flex-none`	`flex: none`

<!-- Three equal-width columns -->
<div class="flex gap-4">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Order

Reorder flex (or grid) items visually without changing the DOM.

Class	CSS
`order-first`	`order: -9999`
`order-last`	`order: 9999`
`order-none`	`order: 0`
`order-1` – `order-12`	`order: 1` – `order: 12`
`order-[13]`	`order: 13`

<div class="flex">
  <div class="order-last">Shows last</div>
  <div class="order-first">Shows first</div>
  <div>Middle</div>
</div>

Gap

Space between flex items (and grid items).

Class	CSS
`gap-0`	`gap: 0`
`gap-1`	`gap: 0.25rem`
`gap-2`	`gap: 0.5rem`
`gap-4`	`gap: 1rem`
`gap-8`	`gap: 2rem`
`gap-x-4`	`column-gap: 1rem`
`gap-y-4`	`row-gap: 1rem`
`gap-[1.5rem]`	`gap: 1.5rem`

<div class="flex flex-wrap gap-x-6 gap-y-3">
  <!-- Different horizontal and vertical gaps -->
</div>

Common Flex Patterns

Centered content (both axes)

<div class="flex items-center justify-center h-screen">
  <p>Perfectly centered</p>
</div>

Sticky footer

<body class="flex flex-col min-h-screen">
  <header>...</header>
  <main class="grow">...</main>
  <footer>...</footer>
</body>

Card with top icon and bottom action

<div class="flex flex-col h-full p-6 border rounded-xl">
  <div class="grow">
    <h3>Title</h3>
    <p>Description</p>
  </div>
  <button class="mt-4">Action</button>
</div>

Space between left and right groups

<div class="flex justify-between items-center">
  <span>Left content</span>
  <div class="flex gap-2">
    <button>A</button>
    <button>B</button>
  </div>
</div>

Push last item to end with `ml-auto`

<div class="flex items-center gap-4">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <button class="ml-auto">Sign in</button>
</div>