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.
Frequently Asked Questions
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes (e.g., flex, pt-4, text-blue-600) that you compose directly in HTML to build custom designs without writing CSS. It uses a JIT compiler to include only the classes you actually use.
What are responsive prefixes in Tailwind?
Tailwind uses breakpoint prefixes to apply utilities at specific screen widths: sm: (≥640px), md: (≥768px), lg: (≥1024px), xl: (≥1280px), 2xl: (≥1536px). For example, md:flex applies display: flex only on medium screens and above.
What changed in Tailwind CSS v4?
Tailwind v4 uses a new CSS-first configuration via @theme instead of tailwind.config.js, ships the Oxide engine for up to 5× faster builds, adds native cascade layers, uses color-mix() for opacity, introduces 3D transform utilities (rotate-x-*, perspective-*), and adds a starting: variant for entry animations.
How do I use the dark: variant?
Prefix any utility with dark: to apply it only in dark mode. For example, dark:bg-gray-900 dark:text-white. Tailwind detects dark mode via the prefers-color-scheme media query by default, or you can use the class strategy (adding a .dark class to <html>).
What is the group-hover: variant?
group-hover: lets you style child elements when a parent is hovered. Mark the parent with class="group", then use group-hover:opacity-100 on a child to show/hide it on parent hover. This is useful for reveal-on-hover card actions.
How do I use arbitrary values in Tailwind?
Tailwind supports arbitrary values with square brackets: w-[328px], bg-[#1da1f2], text-[clamp(1rem,5vw,3rem)]. This lets you use any CSS value without adding it to your config file.