Tailwind CSS 4 Cheat Sheet (2026)

Quick reference for Tailwind CSS 4 utility classes.

Layout

1
2
3
4
5
6
7
container     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
6
p-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

text-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
4
bg-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

Edit

Pub: 13 May 2026 16:43 UTC

Views: 4