Tailwind CSS Cheat Sheet Complete Utility Class Reference
The ultimate Tailwind CSS cheat sheet for 2026. Every utility class organized by category with CSS equivalents and practical descriptions. Bookmark this page for instant reference while building with Tailwind CSS.
A Tailwind CSS cheat sheet is a quick reference guide that organizes all Tailwind CSS utility classes by category for fast lookup. Instead of searching documentation, developers use cheat sheets to quickly find the correct class name for spacing, typography, colors, layout, and other CSS properties.
Tailwind CSS v4 generates thousands of utility classes covering every CSS property. The core framework includes classes for spacing (padding, margin), typography (font size, weight, line height), colors (text, background, border), layout (flex, grid, position), sizing (width, height), borders, shadows, transitions, and responsive variants.
Tailwind CSS uses a consistent spacing scale where each unit equals 4px (0.25rem). Common values: p-1 (4px), p-2 (8px), p-4 (16px), p-6 (24px), p-8 (32px), p-12 (48px), p-16 (64px). The same scale applies to margin (m-), gap (gap-), width (w-), and height (h-) utilities.
Tailwind CSS uses mobile-first responsive prefixes: sm: (640px+), md: (768px+), lg: (1024px+), xl: (1280px+), and 2xl: (1536px+). Apply any utility at a specific breakpoint by adding the prefix. Example: md:flex-row makes an element flex-row on medium screens and above while remaining the default on smaller screens.
Tailwind CSS uses a color-shade naming pattern: {color}-{shade}. Colors include slate, gray, zinc, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose. Shades range from 50 (lightest) to 950 (darkest) in increments of 50 and 100.