liminfoTailwind CSS Reference
Free reference guide: Tailwind CSS Reference
About Tailwind CSS Reference
The Tailwind CSS Reference is a searchable quick-reference for Tailwind CSS utility classes, organized into six categories: Layout, Typography, Colors, Spacing, Responsive, and Dark Mode. Each entry shows the utility class name or pattern, describes what it does, and provides a copy-ready HTML snippet demonstrating its usage. Tailwind CSS is a utility-first CSS framework that lets you build custom designs directly in your markup without writing custom CSS files, and this reference covers the classes that frontend developers use most frequently.
Tailwind CSS has become the dominant approach to styling modern web applications, powering sites built with React, Next.js, Vue, Svelte, and plain HTML. Instead of writing semantic class names and separate CSS rules, you compose small, single-purpose utility classes like flex, items-center, text-lg, and bg-blue-500. This reference covers the complete utility vocabulary: flexbox and CSS grid layout, positioning (absolute, relative, fixed, sticky), typography (font sizes, weights, line heights), the full color palette with opacity modifiers, padding/margin/gap spacing, width/height sizing, border radius, and responsive breakpoint prefixes.
Whether you are centering content with flex items-center justify-center, creating a responsive 12-column grid with grid-cols-12 and col-span, applying hover states with hover:bg-blue-600, implementing dark mode with the dark: prefix, building gradient backgrounds with from/to/via color stops, or adding entrance animations with animate-fade-in, this cheat sheet gives you the exact class combination. It is designed for frontend developers who think in utility classes and need instant lookup during component development.
Key Features
- Flexbox layout utilities including flex, inline-flex, flex-col/flex-row direction, justify-* and items-* alignment, plus CSS grid with grid-cols-*, col-span-*, and gap spacing
- Positioning system covering absolute, relative, fixed, and sticky with directional placement (top-0, right-0, bottom-4), plus container and max-w-* for centered content layouts
- Typography utilities from text-xs through text-9xl, font weight classes (font-thin to font-black), line height (leading-*), letter spacing (tracking-*), text alignment, and truncation with line-clamp-*
- Full color system with text-* and bg-* color classes, border and ring colors for input styling, opacity modifiers (bg-black/50), and gradient backgrounds with from-*, via-*, and to-* color stops
- Spacing and sizing with p-*/m-* padding/margin in all directions, gap-* for flex/grid, w-*/h-* width/height including fractional and viewport units, and rounded-* border radius from subtle to fully circular
- Responsive design with mobile-first breakpoint prefixes (sm:, md:, lg:, xl:, 2xl:), state variants (hover:, focus:, active:), and group-hover:/peer-* for parent-child and sibling-based state styling
- Dark mode support with the dark: prefix, darkMode configuration options (class vs media), plus transition-* utilities for smooth property changes and animate-* for spin, bounce, pulse, and ping effects
- Shadow utilities from shadow-sm through shadow-2xl for elevation effects, combined with practical examples showing common UI patterns like cards, buttons, inputs, and floating action buttons
Frequently Asked Questions
How does the responsive breakpoint system work in Tailwind CSS?
Tailwind uses a mobile-first approach. Unprefixed utilities apply to all screen sizes. Prefixed utilities (sm:, md:, lg:, xl:, 2xl:) apply at that breakpoint AND above. For example, grid-cols-1 md:grid-cols-2 lg:grid-cols-3 creates a single column on mobile, two columns from 768px, and three columns from 1024px. The default breakpoints are: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). You never need max-width media queries; just set the base style for mobile and override at larger breakpoints.
What is the difference between darkMode "class" and "media" in Tailwind?
With darkMode: "media", dark: utilities activate based on the user's OS preference (prefers-color-scheme: dark). With darkMode: "class", they activate only when a dark class is present on the html or body element, giving you manual control via JavaScript. The "class" strategy is more flexible because it allows users to toggle dark mode independently of their OS setting and lets you persist the preference in localStorage or a cookie.
How do I center an element both horizontally and vertically?
The most common approach is flex items-center justify-center on the parent container. For full-viewport centering, add h-screen: <div class="flex items-center justify-center h-screen">. For horizontal centering of a block element, use mx-auto with a width constraint: <div class="mx-auto max-w-lg">. For grid layout, use place-items-center: <div class="grid place-items-center h-screen">.
How do I use gradients in Tailwind CSS?
Apply bg-gradient-to-{direction} for the gradient direction (r for right, l for left, t for top, b for bottom, br for bottom-right, etc.). Then set color stops with from-{color}, via-{color} (optional middle), and to-{color}. Example: bg-gradient-to-r from-blue-500 to-purple-500 creates a left-to-right blue-to-purple gradient. For overlays, use bg-gradient-to-b from-transparent to-black/50 on an absolutely positioned element.
What is the group-hover pattern and how does it work?
The group-hover pattern lets child elements react to a hover on a parent element. Add the group class to the parent container, then use group-hover: prefixed utilities on children. Example: <div class="group"><p class="group-hover:text-blue-500">Turns blue when parent is hovered</p></div>. Similarly, peer-* lets a sibling element style based on another sibling's state: <input class="peer" /><p class="hidden peer-focus:block">Shows when input is focused</p>.
How do I handle spacing and sizing with arbitrary values?
Tailwind provides a consistent spacing scale: 1 = 0.25rem (4px), 2 = 0.5rem, 4 = 1rem, 8 = 2rem, etc. For values not in the default scale, use arbitrary value syntax with square brackets: p-[13px], w-[calc(100%-2rem)], mt-[3.5rem]. Fractional widths like w-1/2, w-1/3, w-2/5 are available for responsive layouts. Special values include w-full (100%), h-screen (100vh), min-h-screen, and max-w-prose (65ch for readable line lengths).
How do transitions and animations work in Tailwind CSS?
Add transition-{property} (transition-all, transition-colors, transition-opacity, transition-transform) to enable CSS transitions. Control duration with duration-{ms} (duration-150, duration-300, duration-500) and easing with ease-{type} (ease-in, ease-out, ease-in-out). For built-in animations, use animate-spin (continuous rotation), animate-bounce (vertical bounce), animate-pulse (opacity fade), and animate-ping (expanding ring). Combine with hover states: hover:scale-105 transition-transform duration-200.
What is the recommended approach for building common UI components?
For cards, use rounded-xl border border-gray-200 p-5 dark:border-gray-700 with shadow-sm. For buttons, combine rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-700 with transition-colors. For inputs, use w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500. Always include dark: variants for dark mode compatibility. Use the @apply directive in component libraries only when extracting truly reusable component styles.