Tailwind CSS Classes Cheat Sheet — Essential Utility Reference

High-frequency Tailwind CSS utility classes for flexbox, grid, spacing, typography, positioning, colors, and responsive modifiers.

Layout & Flexbox / Grid

flex items-center justify-between

Standard horizontal flex bar with space between ends and vertical center alignment

grid grid-cols-1 md:grid-cols-3 gap-6

1 column on mobile, 3 columns on tablet/desktop with 1.5rem gutter gap

flex-1 min-w-0 truncate

Fluid flexible child that truncates long text without breaking container layout

absolute inset-0 z-10

Cover full parent container (top: 0; right: 0; bottom: 0; left: 0;) with z-index 10

p-4 sm:p-6 md:p-8

Responsive padding scaling from 1rem on mobile to 2rem on desktop

max-w-7xl mx-auto px-4

Standard centered container with max width 80rem and gutter padding

space-y-4

Adds margin-top: 1rem to every child element except the first one

w-full h-screen object-cover

Full viewport width and height image with aspect ratio cropping

text-sm font-semibold text-slate-900

14px bold heading with dark slate color token

hover:bg-indigo-600 transition-colors duration-200

Smooth 200ms background color transition on hover

focus:outline-none focus:ring-2 focus:ring-indigo-500

Accessible keyboard focus indicator with 2px ring

dark:bg-slate-900 dark:text-white

Automatic dark mode styling when dark class is applied to root