Tailwind CSS Cheatsheet

Layout and Display

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.

Display

Control the display CSS property.

Class	CSS
`block`	`display: block`
`inline-block`	`display: inline-block`
`inline`	`display: inline`
`flex`	`display: flex`
`inline-flex`	`display: inline-flex`
`grid`	`display: grid`
`inline-grid`	`display: inline-grid`
`table`	`display: table`
`table-cell`	`display: table-cell`
`table-row`	`display: table-row`
`contents`	`display: contents`
`list-item`	`display: list-item`
`hidden`	`display: none`
`flow-root`	`display: flow-root`

<div class="hidden md:block">Visible on md+ only</div>
<span class="inline-block w-4 h-4 bg-blue-500 rounded-full"></span>

Container

Centers content and applies max-width tied to the current breakpoint.

<div class="container mx-auto px-4">
  <!-- content -->
</div>

Breakpoint	Max-width
`sm`	640px
`md`	768px
`lg`	1024px
`xl`	1280px
`2xl`	1536px

container sets max-width to the current breakpoint's value but does not center by default in v3 — add mx-auto. In v4 configure it in your CSS with @utility.

Positioning

Position Type

Class	CSS
`static`	`position: static`
`relative`	`position: relative`
`absolute`	`position: absolute`
`fixed`	`position: fixed`
`sticky`	`position: sticky`

Inset / TRBL

Controls top, right, bottom, left using the spacing scale.

Class	CSS
`inset-0`	`top: 0; right: 0; bottom: 0; left: 0`
`inset-x-0`	`left: 0; right: 0`
`inset-y-0`	`top: 0; bottom: 0`
`top-0`	`top: 0`
`top-4`	`top: 1rem`
`top-1/2`	`top: 50%`
`top-full`	`top: 100%`
`top-auto`	`top: auto`
`-top-4`	`top: -1rem`
`top-[72px]`	`top: 72px`

Same scale applies to right-*, bottom-*, left-*, and inset-*.

<!-- Centered overlay -->
<div class="relative">
  <div class="absolute inset-0 bg-black/50"></div>
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
    Centered
  </div>
</div>

<!-- Sticky header -->
<header class="sticky top-0 z-50 bg-white border-b">...</header>

Z-Index

Class	CSS
`z-0`	`z-index: 0`
`z-10`	`z-index: 10`
`z-20`	`z-index: 20`
`z-30`	`z-index: 30`
`z-40`	`z-index: 40`
`z-50`	`z-index: 50`
`z-auto`	`z-index: auto`
`-z-10`	`z-index: -10`
`z-[100]`	`z-index: 100`

Float and Clear

Class	CSS
`float-left`	`float: left`
`float-right`	`float: right`
`float-none`	`float: none`
`float-start`	`float: inline-start`
`float-end`	`float: inline-end`
`clear-left`	`clear: left`
`clear-right`	`clear: right`
`clear-both`	`clear: both`
`clear-none`	`clear: none`

Object Fit and Position

For <img>, <video>, and replaced elements.

Class	CSS
`object-contain`	`object-fit: contain`
`object-cover`	`object-fit: cover`
`object-fill`	`object-fit: fill`
`object-none`	`object-fit: none`
`object-scale-down`	`object-fit: scale-down`
`object-center`	`object-position: center`
`object-top`	`object-position: top`
`object-bottom`	`object-position: bottom`
`object-left`	`object-position: left`
`object-right`	`object-position: right`
`object-left-top`	`object-position: left top`
`object-[50%_25%]`	`object-position: 50% 25%`

<img class="w-full h-48 object-cover object-center" src="photo.jpg" alt="">

Overflow

Class	CSS
`overflow-auto`	`overflow: auto`
`overflow-hidden`	`overflow: hidden`
`overflow-clip`	`overflow: clip`
`overflow-visible`	`overflow: visible`
`overflow-scroll`	`overflow: scroll`
`overflow-x-auto`	`overflow-x: auto`
`overflow-y-auto`	`overflow-y: auto`
`overflow-x-hidden`	`overflow-x: hidden`
`overflow-y-scroll`	`overflow-y: scroll`

<!-- Truncate text to single line -->
<p class="overflow-hidden text-ellipsis whitespace-nowrap">Long text...</p>

<!-- Scrollable container -->
<div class="overflow-y-auto max-h-64">...</div>

Visibility

Class	CSS
`visible`	`visibility: visible`
`invisible`	`visibility: hidden`
`collapse`	`visibility: collapse`

invisible hides the element but preserves its space in layout. hidden (display: none) removes it from layout entirely.

Overscroll Behavior

Class	CSS
`overscroll-auto`	`overscroll-behavior: auto`
`overscroll-contain`	`overscroll-behavior: contain`
`overscroll-none`	`overscroll-behavior: none`
`overscroll-x-contain`	`overscroll-behavior-x: contain`
`overscroll-y-none`	`overscroll-behavior-y: none`

<!-- Prevent scroll chaining on a modal -->
<div class="overflow-y-auto overscroll-contain h-screen">...</div>

Isolation

Class	CSS
`isolate`	`isolation: isolate`
`isolation-auto`	`isolation: auto`

Creates a new stacking context without changing z-index. Useful to contain mix-blend-mode effects.

Box Sizing

Class	CSS
`box-border`	`box-sizing: border-box`
`box-content`	`box-sizing: content-box`

Preflight sets box-border on all elements by default.

Aspect Ratio

Class	CSS
`aspect-auto`	`aspect-ratio: auto`
`aspect-square`	`aspect-ratio: 1 / 1`
`aspect-video`	`aspect-ratio: 16 / 9`
`aspect-[4/3]`	`aspect-ratio: 4 / 3`

<div class="aspect-video w-full bg-black">
  <iframe class="w-full h-full" src="..."></iframe>
</div>

Columns (Multi-column Layout)

Class	CSS
`columns-1` – `columns-12`	`columns: 1` – `columns: 12`
`columns-auto`	`columns: auto`
`columns-3xs`	`columns: 16rem`
`columns-xs`	`columns: 20rem`
`columns-sm`	`columns: 24rem`
`columns-md`	`columns: 28rem`
`columns-lg`	`columns: 32rem`
`columns-xl`	`columns: 36rem`

<div class="columns-3 gap-4">
  <p>Column item...</p>
  <p>Column item...</p>
  <p>Column item...</p>
</div>

Column Break

Class	CSS
`break-before-auto`	`break-before: auto`
`break-before-page`	`break-before: page`
`break-before-column`	`break-before: column`
`break-before-avoid`	`break-before: avoid`
`break-after-column`	`break-after: column`
`break-inside-avoid`	`break-inside: avoid`
`break-inside-avoid-column`	`break-inside: avoid-column`

Break (Word and Line)

Class	CSS
`break-normal`	`overflow-wrap: normal; word-break: normal`
`break-words`	`overflow-wrap: break-word`
`break-all`	`word-break: break-all`
`break-keep`	`word-break: keep-all`

Line Clamp

Clamp multi-line text to N lines with an ellipsis:

<p class="line-clamp-3">
  This long paragraph will be clamped to three lines...
</p>

<p class="line-clamp-none">No clamping</p>

Class	Lines
`line-clamp-1`	1
`line-clamp-2`	2
`line-clamp-3`	3
`line-clamp-4`	4
`line-clamp-5`	5
`line-clamp-6`	6
`line-clamp-none`	no clamp