Reference · 8 min read

Tailwind CSS Cheat Sheet 2026

A quick-reference guide to the most useful Tailwind CSS utility classes. Bookmark this page for fast access while building your next project. Covers Tailwind CSS v4 (released 2025).

Responsive Breakpoints

All Tailwind utilities can be prefixed with a breakpoint to apply them conditionally. Tailwind is mobile-first — unprefixed classes apply to all screen sizes.

Prefix	Min Width	Example
sm:	640px	sm:text-lg
md:	768px	md:grid-cols-2
lg:	1024px	lg:px-16
xl:	1280px	xl:max-w-screen-xl
2xl:	1536px	2xl:text-6xl

Spacing (Padding & Margin)

Tailwind uses a 4px base unit. p-1 = 4px, p-4 = 16px, p-8 = 32px.

Padding

p-{n}Padding all sides

px-{n}Horizontal padding

py-{n}Vertical padding

pt-{n}Padding top

pb-{n}Padding bottom

pl-{n}Padding left

pr-{n}Padding right

ps-{n}Padding inline-start (RTL-aware)

Margin

m-{n}Margin all sides

mx-{n}Horizontal margin

my-{n}Vertical margin

mx-autoCenter horizontally

mt-{n}Margin top

mb-{n}Margin bottom

-mt-{n}Negative margin top

space-x-{n}Gap between flex children (horizontal)

Flexbox

Container

flexDisplay flex

inline-flexInline flex container

flex-rowDirection: row (default)

flex-colDirection: column

flex-wrapWrap items to next line

flex-nowrapPrevent wrapping

Alignment

items-startAlign items: flex-start

items-centerAlign items: center

items-endAlign items: flex-end

justify-startJustify: flex-start

justify-centerJustify: center

justify-endJustify: flex-end

justify-betweenJustify: space-between

justify-aroundJustify: space-around

Children

flex-1Grow and shrink as needed

flex-autoGrow and shrink based on content

flex-nonePrevent grow/shrink

shrink-0Never shrink

gap-{n}Gap between items

order-{n}Reorder items

CSS Grid

Grid Container

gridDisplay grid

grid-cols-{n}Number of columns (1–12)

grid-rows-{n}Number of rows

gap-{n}Gap between rows and columns

gap-x-{n}Column gap only

gap-y-{n}Row gap only

col-span-{n}Span n columns

row-span-{n}Span n rows

Typography

Font Weight

font-thinweight: 100

font-lightweight: 300

font-normalweight: 400

font-mediumweight: 500

font-semiboldweight: 600

font-boldweight: 700

font-extraboldweight: 800

font-blackweight: 900

Text Alignment & Decoration

text-leftAlign left

text-centerAlign center

text-rightAlign right

underlineUnderline text

line-throughStrikethrough

uppercaseUppercase transform

capitalizeCapitalize first letter

tracking-wideLetter spacing wider

leading-relaxedLine height 1.625

truncateTruncate with ellipsis

Colors

Tailwind includes a full color palette from 50 (lightest) to 950 (darkest). Available for text, background, border, and more.

Common Usage

text-gray-900Dark text

text-gray-600Secondary text

text-whiteWhite text

bg-whiteWhite background

bg-gray-50Light gray background

bg-cyan-700Brand color background

border-gray-200Light border

border-cyan-300Accent border

Sizing (Width & Height)

Width

w-full100% width

w-screen100vw

w-{n}Fixed width (4px units)

w-1/250% width

w-1/333.33% width

w-autoAuto width

max-w-smMax width 384px

max-w-xlMax width 576px

max-w-4xlMax width 896px

max-w-screen-xlMax width 1280px

Height

h-full100% height

h-screen100vh

h-{n}Fixed height (4px units)

h-autoAuto height

min-h-screenMin height: 100vh

max-h-96Max height 384px

Borders & Rounded Corners

Borders

border1px border

border-22px border

border-tTop border only

border-bBottom border only

border-gray-200Border color

divide-yBorders between children

Border Radius

rounded0.25rem border radius

rounded-md0.375rem

rounded-lg0.5rem

rounded-xl0.75rem

rounded-2xl1rem

rounded-fullFully rounded (pills, circles)

Shadows & Effects

Box Shadow

shadow-smSmall shadow

shadowDefault shadow

shadow-mdMedium shadow

shadow-lgLarge shadow

shadow-xlExtra large shadow

shadow-noneRemove shadow

Opacity & Visibility

opacity-0Fully transparent

opacity-5050% opacity

opacity-100Fully visible

hiddendisplay: none

invisiblevisibility: hidden

overflow-hiddenClip overflow

Position & Z-Index

Position

staticDefault flow position

relativeRelative position

absoluteAbsolute position

fixedFixed to viewport

stickyStick on scroll

inset-0top/right/bottom/left: 0

top-0top: 0

z-10z-index: 10

z-50z-index: 50

State Modifiers

Interactive States

hover:bg-gray-900On mouse hover

focus:outline-noneOn focus

active:opacity-75On click/tap

disabled:opacity-50Disabled state

group-hover:text-whiteWhen parent hovered

dark:bg-gray-900Dark mode class

transition-colorsAnimate color changes

duration-200Transition: 200ms

ease-in-outEasing function

Put these classes to work with free Tailwind CSS components

Skip building from scratch. Copy-paste ready-made Tailwind CSS components into your project.

Hero Sections Card Components Navbars View All →

Continue Reading

Tailwind CSS vs Bootstrap 2026

Which CSS framework should you use? →

How to Use Tailwind CSS in React

Step-by-step setup guide →