Tailwind CSS 4 Cheat Sheet (2026) Quick reference for Tailwind CSS 4 utility classes. Layout ⎗ ✓ 1 2 3 4 5 6 7container mx-auto max-width breakpoints flex display: flex grid display: grid grid-cols-3 grid-template-columns: repeat(3, 1fr) gap-4 gap: 1rem items-center align-items: center justify-between justify-content: space-between Spacing ⎗ ✓ 1 2 3 4 5 6p-4 padding: 1rem px-4 padding-left/right: 1rem py-2 padding-top/bottom: 0.5rem m-4 margin: 1rem mx-auto margin-left/right: auto space-y-4 > * * margin-top: 1rem Typography ⎗ ✓ 1 2 3 4 5 6 7 8 9 10text-sm font-size: 0.875rem text-lg font-size: 1.125rem text-xl font-size: 1.25rem text-2xl font-size: 1.5rem font-bold font-weight: 700 font-medium font-weight: 500 text-center text-align: center text-gray-500 color: #6b7280 tracking-wide letter-spacing: 0.025em leading-relaxed line-height: 1.625 Colors (v4 CSS-first) ⎗ ✓ 1 2 3 4bg-indigo-600 background: var(--color-indigo-600) text-emerald-500 color: var(--color-emerald-500) border-gray-200 border-color: var(--color-gray-200) ring-blue-500 --tw-ring-color: var(--color-blue-500) Borders
Warning LINK You are about to visit a link which has been flagged with the above content warnings. Do you wish to continue? Continue Cancel