Tailwind CSS has thousands of utility classes. The official docs are thorough but massive. When you are mid-build, scrolling pages of documentation to find the right class for a border radius or a specific shade of blue is a productivity killer.

The reality: most projects use the same 100-200 classes repeatedly. The rest are edge cases you may never touch. This cheat sheet covers the classes you reach for daily, organized by what you are trying to do rather than alphabetically or by CSS property.

Spacing: Margin and Padding

Tailwind uses a spacing scale where each unit equals 0.25rem (4px at default font size). The most common values:

| Class | Value | |-------|-------| | p-0 | 0px | | p-1 | 4px | | p-2 | 8px | | p-3 | 12px | | p-4 | 16px | | p-6 | 24px | | p-8 | 32px | | p-12 | 48px | | p-16 | 64px |

Replace p with m for margin. Add a direction: px (horizontal), py (vertical), pt (top), pb (bottom), pl (left), pr (right). So px-4 gives 16px of horizontal padding, and mt-8 gives 32px of top margin.

Negative margins use a dash prefix: -mt-4 gives -16px top margin. Useful for overlapping elements or pulling items into adjacent space.

The space-x- and space-y- utilities add spacing between child elements. space-x-4 on a flex container puts 16px between each child horizontally. This is often more convenient than adding margin to individual items.

Pro tip: gap- works on both flex and grid containers and is generally cleaner than space- because it only adds space between items, not before the first or after the last.

Typography: Text Size, Weight, and Color

Text sizing in Tailwind follows a readable scale:

• text-xs (12px), text-sm (14px), text-base (16px), text-lg (18px)
• text-xl (20px), text-2xl (24px), text-3xl (30px), text-4xl (36px)
• text-5xl (48px), text-6xl (60px) for hero headings

Font weight: font-light (300), font-normal (400), font-medium (500), font-semibold (600), font-bold (700), font-extrabold (800).

Line height: leading-tight (1.25), leading-snug (1.375), leading-normal (1.5), leading-relaxed (1.625), leading-loose (2).

Text color uses the format text-{color}-{shade}. For example: text-gray-700 for body text, text-blue-600 for links, text-red-500 for errors. The shade scale runs from 50 (lightest) to 950 (darkest).

For truncating long text: truncate (single line with ellipsis), line-clamp-2 or line-clamp-3 (multi-line truncation).

Text alignment: text-left, text-center, text-right, text-justify. Transform: uppercase, lowercase, capitalize. Decoration: underline, line-through, no-underline.

Flexbox and Grid Layout

Flexbox is the workhorse of Tailwind layouts. The essential classes:

`html

• flex enables flexbox
• flex-col switches to vertical stacking
• flex-wrap allows wrapping to next line
• items-center vertically centers children
• items-start, items-end for top/bottom alignment
• justify-center horizontally centers
• justify-between pushes items to edges
• justify-end aligns to the right
• flex-1 makes an item grow to fill available space
• flex-shrink-0 prevents an item from shrinking

For grid layouts:

`html

• grid-cols-1 through grid-cols-12 for column counts
• col-span-2, col-span-3 to make items span multiple columns
• grid-rows-* for explicit row definitions
• auto-rows-fr for equal-height rows

Responsive grids are simple: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gives you one column on mobile, two on tablet, three on desktop.

Responsive Design Breakpoints

Tailwind's responsive system uses mobile-first breakpoints. Unprefixed classes apply to all screen sizes. Prefixed classes apply at that breakpoint and above.

Default breakpoints: - sm: - 640px and up (large phones in landscape) - md: - 768px and up (tablets) - lg: - 1024px and up (laptops) - xl: - 1280px and up (desktops) - 2xl: - 1536px and up (large screens)

Examples that cover 90% of responsive needs:

`html

`

The mobile-first approach means you write the mobile layout with plain classes, then add breakpoint prefixes to change things for larger screens. This keeps the code cleaner because mobile styles are typically simpler.

Use a CSS Minifier on your production build to strip unused classes. Tailwind's purge feature already handles this, but if you are shipping any custom CSS alongside Tailwind, minifying the combined output reduces payload size.

Colors, Backgrounds, and Borders

Tailwind's color system uses a consistent naming pattern: {property}-{color}-{shade}.

• Text: text-slate-700, text-emerald-500
• Background: bg-white, bg-gray-100, bg-blue-500
• Border: border-gray-200, border-red-500
• Ring (focus outline): ring-blue-500, ring-2

The color palette includes: slate, gray, zinc, neutral, stone (grays), red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose.

Use a Color Picker to find the exact Tailwind shade that matches your brand. Each color has shades from 50 to 950, giving you 19 options per color.

Border radius: rounded-none, rounded-sm, rounded (default 4px), rounded-md (6px), rounded-lg (8px), rounded-xl (12px), rounded-2xl (16px), rounded-full (circle/pill).

Box shadows via a Shadow Generator can be applied with: shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl. These are well-tuned defaults that look natural without any customization.

Opacity: opacity-0 through opacity-100 in steps of 5. Also works as a modifier: bg-black/50 gives black at 50% opacity.

Common Patterns You Will Copy-Paste

Card component: `html

Centered container with max width: `html

Button: `html Click me `

Input field: `html `

Avatar circle: `html `

Sticky header: `html

These patterns appear in almost every project. Save them somewhere accessible and customize the colors and spacing for your brand.

FAQ

Is Tailwind CSS bigger than regular CSS in production?

No. Tailwind's build tool scans your code and only includes the classes you actually use. A typical production CSS file is 10-30KB gzipped, which is smaller than most CSS frameworks. Unused classes are automatically removed during the build step.

How do I use custom colors in Tailwind?

Extend the color palette in your tailwind.config.js file under theme.extend.colors. Define your custom color with shades (50 through 950) and then use it like any built-in color: text-brand-500, bg-brand-100.

Should I use @apply to create reusable component classes?

@apply extracts Tailwind utilities into a CSS class. Use it sparingly for truly repeated patterns (like a button style used in 20 places). For components, it is usually better to create a React/Vue component that encapsulates the class list, since that keeps styles and markup together.

Does Tailwind work with CSS-in-JS solutions?

Yes, but it is redundant. Tailwind and CSS-in-JS both solve the same problem (scoping and organizing styles). Pick one. If your project already uses styled-components or Emotion, adding Tailwind creates confusion about which system to use for what.