Tailwind CSS Cheatsheet

Layout and Display

Use this Tailwind CSS reference while you build software engineering projects, review code, or refresh the syntax you reach for most.

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