Tailwind CSS Cheatsheet — Interactive Reference
Search all Tailwind CSS utility classes across 12 categories. Click any class to copy it. Covers layout, spacing, typography, colors, borders, effects, animations, and more. Supports v3 and v4.
What's Covered
Layout
display, position, overflow, z-index, container
Flexbox
flex, direction, wrap, justify, align, grow, shrink
Grid
grid-cols, rows, gap, span, start, end, flow
Spacing
padding, margin, space-x, space-y
Typography
font-size, weight, family, line-height, tracking
Colors
text, bg, border colors across all 22 palettes
Borders
border-width, radius, style, ring, divide
Effects
opacity, shadow, blur, brightness, mix-blend-mode
Transforms
scale, rotate, translate, skew, origin
Animations
animate-spin, pulse, bounce, ping, transition
Interactivity
cursor, pointer-events, select, scroll
Sizing
width, height, max/min dimensions, aspect-ratio
Tips & Shortcuts
- / — Press to focus the search box instantly from anywhere on the page.
- Click any class card — copies the class to your clipboard immediately.
- Category filter — click a category button to browse only that section.
- "View all N →" — in the default view, shows 20 per category; click to see all.
- v3 / v4 toggle — switch versions to see a summary of Tailwind v4 breaking changes and new features.