Tailwind CSS Cheat Sheet: Complete Class Reference

Tailwind CSS is a utility-first framework: instead of writing custom CSS, you compose small, single-purpose classes directly in HTML. This cheat sheet covers every major utility category, responsive variants, dark mode, and the patterns you'll use every day.

Quick reference

Installation

# Tailwind CSS v4 (recommended)
npm install tailwindcss @tailwindcss/vite
# or with PostCSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

/* main CSS file */
@import "tailwindcss";

Responsive breakpoints

Tailwind is mobile-first — unprefixed classes apply to all screen sizes; prefixed classes apply from that breakpoint up.

<!-- Hidden on mobile, flex on tablet+ -->
<div class="hidden md:flex">...</div>

<!-- 1 col on mobile, 3 cols on desktop -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">...</div>

Layout

<!-- Display -->
<div class="block">Block</div>
<div class="inline-block">Inline block</div>
<div class="flex">Flex</div>
<div class="inline-flex">Inline flex</div>
<div class="grid">Grid</div>
<div class="hidden">Hidden (display:none)</div>

<!-- Position -->
<div class="static">Static</div>
<div class="relative">Relative</div>
<div class="absolute top-0 right-0">Absolute</div>
<div class="fixed bottom-4 right-4">Fixed</div>
<div class="sticky top-0">Sticky</div>

<!-- Overflow -->
<div class="overflow-hidden">No scroll</div>
<div class="overflow-auto">Scroll if needed</div>
<div class="overflow-x-auto overflow-y-hidden">Horizontal scroll</div>

<!-- Z-index -->
<div class="z-0">z-index: 0</div>
<div class="z-10">z-index: 10</div>
<div class="z-50">z-index: 50</div>

Sizing

Width

<!-- Fixed widths (4px scale: w-1 = 4px) -->
<div class="w-4">16px</div>
<div class="w-8">32px</div>
<div class="w-16">64px</div>
<div class="w-32">128px</div>
<div class="w-64">256px</div>

<!-- Percentage widths -->
<div class="w-1/2">50%</div>
<div class="w-1/3">33.33%</div>
<div class="w-2/3">66.66%</div>
<div class="w-full">100%</div>

<!-- Viewport and special widths -->
<div class="w-screen">100vw</div>
<div class="w-min">min-content</div>
<div class="w-max">max-content</div>
<div class="w-fit">fit-content</div>

<!-- Constraints -->
<div class="max-w-sm">max-width: 384px</div>
<div class="max-w-md">max-width: 448px</div>
<div class="max-w-lg">max-width: 512px</div>
<div class="max-w-xl">max-width: 576px</div>
<div class="max-w-2xl">max-width: 672px</div>
<div class="max-w-4xl">max-width: 896px</div>
<div class="max-w-screen-lg">max-width: 1024px</div>

Height

<div class="h-16">64px</div>
<div class="h-full">100%</div>
<div class="h-screen">100vh</div>
<div class="h-dvh">100dvh (dynamic viewport)</div>
<div class="min-h-screen">min-height: 100vh</div>

Spacing

Tailwind uses a 4px scale — p-1 = 4px, p-4 = 16px, p-8 = 32px.

Padding

<div class="p-4">All sides: 16px</div>
<div class="px-6">Horizontal: 24px</div>
<div class="py-2">Vertical: 8px</div>
<div class="pt-4 pb-8">Top: 16px, Bottom: 32px</div>
<div class="pl-4 pr-6">Left: 16px, Right: 24px</div>

Margin

<div class="m-4">All sides: 16px</div>
<div class="mx-auto">Horizontal center (auto)</div>
<div class="my-8">Vertical: 32px</div>
<div class="mt-4 mb-6">Top: 16px, Bottom: 24px</div>
<div class="-mt-2">Negative margin: -8px</div>

Gap (for flex/grid)

<div class="flex gap-4">Flex with 16px gap</div>
<div class="grid gap-6">Grid with 24px gap</div>
<div class="grid gap-x-4 gap-y-8">Column/row gaps separate</div>

Space between (flex children)

<div class="flex space-x-4">4 horizontal gap between children</div>
<div class="flex flex-col space-y-2">2 vertical gap between children</div>

Typography

Font size

Font weight

<span class="font-thin">font-weight: 100</span>
<span class="font-light">font-weight: 300</span>
<span class="font-normal">font-weight: 400</span>
<span class="font-medium">font-weight: 500</span>
<span class="font-semibold">font-weight: 600</span>
<span class="font-bold">font-weight: 700</span>
<span class="font-extrabold">font-weight: 800</span>
<span class="font-black">font-weight: 900</span>

Text alignment and decoration

<p class="text-left">Left aligned</p>
<p class="text-center">Centered</p>
<p class="text-right">Right aligned</p>
<p class="text-justify">Justified</p>

<span class="underline">Underline</span>
<span class="line-through">Strikethrough</span>
<span class="no-underline">No underline</span>

<span class="italic">Italic</span>
<span class="not-italic">Not italic</span>

<span class="uppercase">ALL CAPS</span>
<span class="lowercase">all lower</span>
<span class="capitalize">First Letter</span>

<span class="tracking-tight">Tight letter-spacing</span>
<span class="tracking-wide">Wide letter-spacing</span>

<span class="leading-tight">Tight line-height</span>
<span class="leading-relaxed">Relaxed line-height</span>

Text overflow

<p class="truncate">Single line, truncated with ellipsis...</p>
<p class="overflow-hidden line-clamp-3">Clamp to 3 lines max...</p>
<p class="whitespace-nowrap">No line wrapping</p>
<p class="break-words">Break long words</p>

Colors

Tailwind has a built-in palette with shades from 50 (lightest) to 950 (darkest).

Color names: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

<!-- Background -->
<div class="bg-blue-500">Blue background</div>
<div class="bg-gray-100">Light gray</div>
<div class="bg-transparent">Transparent</div>
<div class="bg-white">White</div>
<div class="bg-black">Black</div>

<!-- Text -->
<p class="text-blue-600">Blue text</p>
<p class="text-gray-700">Dark gray text</p>
<p class="text-white">White text</p>

<!-- Border -->
<div class="border border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Blue 2px border</div>

<!-- Opacity -->
<div class="bg-blue-500/50">50% opacity background</div>
<div class="text-black/70">70% opacity text</div>

Flexbox

<!-- Enable flex -->
<div class="flex">Flex row (default)</div>
<div class="flex flex-col">Flex column</div>
<div class="inline-flex">Inline flex</div>

<!-- Direction -->
<div class="flex flex-row">→ Left to right</div>
<div class="flex flex-row-reverse">← Right to left</div>
<div class="flex flex-col">↓ Top to bottom</div>
<div class="flex flex-col-reverse">↑ Bottom to top</div>

<!-- Justify content (main axis) -->
<div class="flex justify-start">|items   |</div>
<div class="flex justify-center">|  items  |</div>
<div class="flex justify-end">|   items|</div>
<div class="flex justify-between">|item item|</div>
<div class="flex justify-around">| item item |</div>
<div class="flex justify-evenly">|item  item|</div>

<!-- Align items (cross axis) -->
<div class="flex items-start">Top aligned</div>
<div class="flex items-center">Vertically centered</div>
<div class="flex items-end">Bottom aligned</div>
<div class="flex items-stretch">Stretch to fill (default)</div>
<div class="flex items-baseline">Text baseline aligned</div>

<!-- Wrap -->
<div class="flex flex-wrap">Wraps to next line</div>
<div class="flex flex-nowrap">No wrapping (default)</div>

<!-- Flex item growth -->
<div class="flex">
  <div class="flex-1">Grows equally</div>
  <div class="flex-none w-32">Fixed width</div>
  <div class="flex-auto">Auto sizing</div>
</div>

<!-- Align self (individual item) -->
<div class="self-start">Top</div>
<div class="self-center">Middle</div>
<div class="self-end">Bottom</div>

Grid

<!-- Define columns -->
<div class="grid grid-cols-1">1 column</div>
<div class="grid grid-cols-2">2 equal columns</div>
<div class="grid grid-cols-3">3 equal columns</div>
<div class="grid grid-cols-12">12 column grid</div>

<!-- Column spanning -->
<div class="grid grid-cols-12">
  <div class="col-span-8">Main content (8/12)</div>
  <div class="col-span-4">Sidebar (4/12)</div>
</div>

<!-- Start/end positions -->
<div class="col-start-2 col-end-5">Columns 2–4</div>
<div class="col-start-1 col-span-2">Start at 1, span 2</div>

<!-- Row spanning -->
<div class="row-span-2">Spans 2 rows</div>

<!-- Auto columns -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))]">
  Responsive auto-fill grid
</div>

<!-- Gap -->
<div class="grid grid-cols-3 gap-4">Uniform gap</div>
<div class="grid grid-cols-3 gap-x-6 gap-y-4">Separate gaps</div>

<!-- Align items in grid -->
<div class="grid items-center justify-items-center">
  Centered in both axes
</div>
<div class="grid place-items-center">Shorthand for above</div>

Borders

<!-- Border width -->
<div class="border">1px border</div>
<div class="border-2">2px border</div>
<div class="border-4">4px border</div>
<div class="border-0">No border</div>
<div class="border-t-2">Top only</div>
<div class="border-b border-l">Bottom + Left</div>

<!-- Border color -->
<div class="border border-gray-300">Gray border</div>
<div class="border border-blue-500">Blue border</div>
<div class="border border-transparent">Transparent</div>

<!-- Border style -->
<div class="border border-solid">Solid</div>
<div class="border border-dashed">Dashed</div>
<div class="border border-dotted">Dotted</div>

<!-- Border radius -->
<div class="rounded-none">No radius (0px)</div>
<div class="rounded-sm">2px</div>
<div class="rounded">4px</div>
<div class="rounded-md">6px</div>
<div class="rounded-lg">8px</div>
<div class="rounded-xl">12px</div>
<div class="rounded-2xl">16px</div>
<div class="rounded-3xl">24px</div>
<div class="rounded-full">9999px (pill/circle)</div>
<div class="rounded-t-lg">Top corners only</div>
<div class="rounded-tl-xl">Top-left corner only</div>

Shadows and effects

<!-- Box shadow -->
<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Default shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-2xl">Massive shadow</div>
<div class="shadow-inner">Inner shadow</div>

<!-- Opacity -->
<div class="opacity-0">Invisible</div>
<div class="opacity-25">25%</div>
<div class="opacity-50">50%</div>
<div class="opacity-75">75%</div>
<div class="opacity-100">Fully visible</div>

<!-- Blur -->
<div class="blur-none">No blur</div>
<div class="blur-sm">4px blur</div>
<div class="blur">8px blur</div>
<div class="blur-lg">16px blur</div>
<div class="blur-xl">24px blur</div>

<!-- Background blur -->
<div class="backdrop-blur-sm">Background blur (glass effect)</div>
<div class="backdrop-blur-lg">Stronger glass effect</div>

Transforms and transitions

<!-- Scale -->
<div class="scale-50">Scale to 50%</div>
<div class="scale-100">Normal size</div>
<div class="scale-110">110%</div>
<div class="hover:scale-105">Scale on hover</div>

<!-- Rotate -->
<div class="rotate-0">0°</div>
<div class="rotate-45">45°</div>
<div class="rotate-90">90°</div>
<div class="rotate-180">180°</div>
<div class="-rotate-45">-45°</div>

<!-- Translate -->
<div class="translate-x-4">Move right 16px</div>
<div class="-translate-x-2">Move left 8px</div>
<div class="translate-y-8">Move down 32px</div>

<!-- Transition -->
<div class="transition">Default transition (all, 150ms ease)</div>
<div class="transition-colors">Only colors transition</div>
<div class="transition-opacity">Only opacity</div>
<div class="transition-transform">Only transforms</div>
<div class="duration-300">300ms duration</div>
<div class="duration-500">500ms duration</div>
<div class="ease-in-out">Ease in-out timing</div>
<div class="delay-150">150ms delay</div>

Dark mode

Tailwind supports dark mode via the dark: variant. By default it uses the OS prefers-color-scheme. You can also set darkMode: 'class' in tailwind.config.js to toggle via a class on <html>.

<!-- Automatic (OS preference) -->
<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-900 dark:text-white">Text</p>
  <button class="bg-blue-500 dark:bg-blue-400">Button</button>
</div>

// tailwind.config.js — class-based dark mode
module.exports = {
  darkMode: 'class',
}

// Toggle dark mode with JS
document.documentElement.classList.toggle('dark')

State variants

<!-- Hover -->
<button class="bg-blue-500 hover:bg-blue-600">Hover darkens</button>

<!-- Focus -->
<input class="outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />

<!-- Active (click) -->
<button class="active:scale-95 active:opacity-80">Press effect</button>

<!-- Disabled -->
<button class="disabled:opacity-50 disabled:cursor-not-allowed" disabled>Disabled</button>

<!-- Checked (checkboxes, radios) -->
<input type="checkbox" class="checked:bg-blue-500" />

<!-- Group hover (parent triggers child) -->
<div class="group hover:bg-gray-100">
  <span class="text-gray-600 group-hover:text-blue-600">Changes on parent hover</span>
</div>

<!-- Peer (sibling triggers sibling) -->
<input type="checkbox" class="peer" id="toggle" />
<label for="toggle" class="peer-checked:text-blue-600">Checked state</label>

<!-- First / Last / Odd / Even -->
<ul>
  <li class="first:pt-0 last:pb-0 odd:bg-gray-50 even:bg-white">Item</li>
</ul>

<!-- Empty state -->
<div class="empty:hidden">Hidden when empty</div>

<!-- Placeholder -->
<input class="placeholder:text-gray-400 placeholder:italic" placeholder="Type here..." />

Arbitrary values

Tailwind lets you use any value with square bracket syntax:

<!-- Custom width -->
<div class="w-[250px]">250px wide</div>

<!-- Custom color (hex) -->
<div class="bg-[#1a1a2e]">Custom hex color</div>
<p class="text-[#ff6b6b]">Custom text color</p>

<!-- Custom font size -->
<p class="text-[17px]">Custom font size</p>

<!-- Custom spacing -->
<div class="mt-[72px]">Custom top margin</div>

<!-- CSS variable -->
<div class="bg-[var(--brand-color)]">Brand color from CSS var</div>

<!-- Grid template -->
<div class="grid grid-cols-[2fr_1fr_1fr]">Custom column template</div>

<!-- Arbitrary property (v3.3+) -->
<div class="[content:'hello']">Arbitrary CSS property</div>

Common patterns

Card component

<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm hover:shadow-lg transition-shadow">
  <img class="w-full h-48 object-cover" src="..." alt="..." />
  <div class="p-6">
    <h3 class="text-lg font-semibold text-gray-900">Card title</h3>
    <p class="mt-2 text-gray-600 text-sm line-clamp-3">Description text...</p>
    <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors">
      Read more
    </button>
  </div>
</div>

Navbar

<nav class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <span class="text-xl font-bold text-gray-900">Logo</span>
      <div class="hidden md:flex items-center gap-8">
        <a class="text-gray-600 hover:text-gray-900 transition-colors" href="#">Home</a>
        <a class="text-gray-600 hover:text-gray-900 transition-colors" href="#">About</a>
        <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors">
          Get started
        </button>
      </div>
    </div>
  </div>
</nav>

Centered hero

<section class="min-h-screen flex flex-col items-center justify-center text-center px-4">
  <h1 class="text-4xl md:text-6xl font-bold text-gray-900 max-w-3xl">
    Build fast, ship faster
  </h1>
  <p class="mt-6 text-lg text-gray-600 max-w-xl">
    Your compelling tagline here.
  </p>
  <div class="mt-8 flex flex-col sm:flex-row gap-4">
    <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold px-8 py-3 rounded-xl transition-colors">
      Get started
    </button>
    <button class="border border-gray-300 hover:border-gray-400 text-gray-700 font-semibold px-8 py-3 rounded-xl transition-colors">
      Learn more
    </button>
  </div>
</section>

Responsive grid

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div class="bg-white rounded-lg p-4 shadow-sm border border-gray-100">Item</div>
  <!-- repeat... -->
</div>

Glass morphism

<div class="bg-white/10 backdrop-blur-lg border border-white/20 rounded-2xl p-6 shadow-xl">
  Glass effect card
</div>

6 common mistakes

1. Forgetting mobile-first order Tailwind breakpoints work upward. md:hidden means "hidden on md and above", not "hidden below md".

<!-- Wrong: tries to hide on mobile -->
<div class="hidden sm:block">...</div> <!-- hidden on xs, visible on sm+ ✓ -->

<!-- Right way to show on mobile, hide on desktop -->
<div class="block lg:hidden">Mobile only</div>

2. Using space-x and gap together space-x-4 adds margin to children; gap-4 is for flex/grid. Don't mix them.

3. Forgetting overflow-hidden on rounded containers

<!-- Image bleeds out of rounded card without overflow-hidden -->
<div class="rounded-xl overflow-hidden">
  <img src="..." />
</div>

4. Applying max-w without mx-auto max-w-xl only limits width — the element stays left-aligned unless you add mx-auto.

5. flex-1 vs w-full Inside a flex container, flex-1 fills remaining space. w-full sets 100% width which may cause overflow if siblings exist.

6. Dark mode class not on <html> When using darkMode: 'class', the dark class must be on <html>, not <body>.

<html class="dark">...</html>   <!-- ✓ -->
<body class="dark">...</body>   <!-- ✗ doesn't work -->

6 frequently asked questions

Q: How do I add a custom color to my Tailwind project? In tailwind.config.js (v3) or via CSS variables (v4):

// v3
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1a1a2e',
      }
    }
  }
}
// Now use: bg-brand, text-brand, border-brand

Q: How do I apply Tailwind classes conditionally in React/Vue? Use a library like clsx or classnames:

import clsx from 'clsx';
<div className={clsx('rounded-lg p-4', isActive && 'bg-blue-500', isDisabled && 'opacity-50')} />

Q: Can I use Tailwind with CSS modules or SCSS? Yes. Use @apply in CSS files to compose utilities:

.btn-primary {
  @apply bg-blue-500 hover:bg-blue-600 text-white font-semibold px-4 py-2 rounded-lg transition-colors;
}

Use @apply sparingly — if overused, you lose Tailwind's purging benefits.

Q: How does Tailwind's PurgeCSS/tree-shaking work? Tailwind v3+ uses JIT (Just-in-Time) compilation — it scans your template files and generates only the CSS classes you actually use. No unused CSS ships. Configure content in tailwind.config.js:

content: ["./src/**/*.{js,ts,jsx,tsx,html}"]

Q: What is the difference between w-full and w-screen?

• w-full = 100% of the parent container
• w-screen = 100vw (full viewport width, including scrollbar)

Q: When should I extract a component vs use Tailwind classes inline? When you copy-paste the same combination of 5+ classes more than twice, extract it into a component (React/Vue component, Blade component, etc.). Don't extract for single-use patterns — the duplication is intentional in utility-first CSS.