All Cheat Sheets

Tailwind CSS Cheat Sheet

Tailwind CSS utility class reference — spacing, colors, typography, layout, responsive, and dark mode.

Layout

Flex centerflex items-center justify-center
Grid 3-colgrid grid-cols-3 gap-4
Containercontainer mx-auto px-4
Hiddenhidden md:block
Positionrelative / absolute / fixed / sticky
Z-indexz-10 / z-50

Spacing

Paddingp-4 px-6 py-2 pt-8
Marginm-4 mx-auto my-2 mt-8
Gapgap-4 gap-x-2 gap-y-6
Space betweenspace-x-4 / space-y-2

Typography

Font sizetext-sm / text-base / text-xl / text-3xl
Font weightfont-normal / font-medium / font-bold
Colortext-zinc-400 / text-white / text-blue-500
Aligntext-left / text-center / text-right
Line clampline-clamp-2 / line-clamp-3
Truncatetruncate

Sizing

Widthw-full / w-1/2 / w-64 / w-screen
Heighth-full / h-screen / h-64
Max widthmax-w-md / max-w-4xl / max-w-none
Min heightmin-h-screen

Visual

Backgroundbg-zinc-900 / bg-blue-500/10
Borderborder border-white/10 rounded-xl
Shadowshadow-lg / shadow-blue-500/20
Opacityopacity-50 / opacity-0
Ringring-1 ring-white/10
Gradientbg-gradient-to-r from-blue-500 to-purple-500

Responsive & States

Breakpointssm: md: lg: xl: 2xl:640 768 1024 1280 1536px
Hoverhover:bg-blue-600
Focusfocus:ring-2 focus:outline-none
Dark modedark:bg-zinc-900 dark:text-white
Group hovergroup-hover:text-blue-400
Transitionstransition-all duration-200

Free tools for this

Keep the references coming

One email a week: new and trending developer tools, fresh comparisons, and what shipped. Unsubscribe in one click.