Tailwind CSS Cheat Sheet

Layout

Display

<div class="block">...</div>
<div class="inline-block">...</div>
<div class="inline">...</div>
<div class="flex">...</div>
<div class="inline-flex">...</div>
<div class="grid">...</div>
<div class="hidden">...</div>

Flexbox

<!-- Container -->
<div class="flex flex-row">Horizontal</div>
<div class="flex flex-col">Vertical</div>
<div class="flex flex-wrap">Wrap</div>

<!-- Alignment -->
<div class="flex justify-start">Left-aligned</div>
<div class="flex justify-center">Centered</div>
<div class="flex justify-end">Right-aligned</div>
<div class="flex justify-between">Space between</div>
<div class="flex justify-around">Space around</div>
<div class="flex justify-evenly">Evenly spaced</div>

<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</div>

<!-- Items -->
<div class="flex-1">Fill remaining space</div>
<div class="flex-none">Fixed size</div>
<div class="flex-shrink-0">Don't shrink</div>
<div class="flex-grow">Grow</div>

Grid

<div class="grid grid-cols-3">3 columns</div>
<div class="grid grid-cols-4">4 columns</div>
<div class="grid grid-cols-12">12 columns</div>

<!-- Responsive -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
  Responsive grid
</div>

<!-- Gap -->
<div class="grid gap-4">16px gap</div>
<div class="grid gap-x-4 gap-y-2">x: 16px y: 8px</div>

<!-- Span -->
<div class="col-span-2">Span 2 columns</div>
<div class="col-span-full">Full width</div>

Spacing

Padding / Margin

<!-- Padding -->
<div class="p-4">All sides 16px</div>
<div class="px-4">Horizontal 16px</div>
<div class="py-4">Vertical 16px</div>
<div class="pt-4">Top 16px</div>
<div class="pr-4">Right 16px</div>
<div class="pb-4">Bottom 16px</div>
<div class="pl-4">Left 16px</div>

<!-- Margin -->
<div class="m-4">All sides 16px</div>
<div class="mx-auto">Horizontally centered</div>
<div class="my-4">Vertical 16px</div>
<div class="mt-4">Top 16px</div>
<div class="-mt-4">Top -16px</div>

<!-- Scale -->
<!-- 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24... -->
<!-- 1 = 4px, 4 = 16px, 8 = 32px -->

Gap

<div class="flex gap-4">16px gap</div>
<div class="flex gap-x-4">Horizontal 16px gap</div>
<div class="flex gap-y-2">Vertical 8px gap</div>

Sizing

Width / Height

<!-- Width -->
<div class="w-full">100%</div>
<div class="w-1/2">50%</div>
<div class="w-1/3">33.33%</div>
<div class="w-64">256px</div>
<div class="w-screen">100vw</div>
<div class="max-w-md">max-width: 28rem</div>
<div class="max-w-xl">max-width: 36rem</div>
<div class="min-w-0">min-width: 0</div>

<!-- Height -->
<div class="h-full">100%</div>
<div class="h-screen">100vh</div>
<div class="h-64">256px</div>
<div class="min-h-screen">min-height: 100vh</div>

Typography

Font Size

<p class="text-xs">12px</p>
<p class="text-sm">14px</p>
<p class="text-base">16px</p>
<p class="text-lg">18px</p>
<p class="text-xl">20px</p>
<p class="text-2xl">24px</p>
<p class="text-3xl">30px</p>
<p class="text-4xl">36px</p>

Font Weight

<p class="font-thin">100</p>
<p class="font-light">300</p>
<p class="font-normal">400</p>
<p class="font-medium">500</p>
<p class="font-semibold">600</p>
<p class="font-bold">700</p>

Text Alignment

<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>

Colors

<p class="text-gray-500">Gray</p>
<p class="text-red-500">Red</p>
<p class="text-blue-500">Blue</p>
<p class="text-green-500">Green</p>
<p class="text-black">Black</p>
<p class="text-white">White</p>

Backgrounds and Borders

Background Color

<div class="bg-white">White</div>
<div class="bg-gray-100">Light gray</div>
<div class="bg-blue-500">Blue</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-500">Gradient</div>

Borders

<div class="border">1px border</div>
<div class="border-2">2px border</div>
<div class="border-gray-300">Gray border</div>
<div class="border-t">Top only</div>
<div class="border-b">Bottom only</div>

<!-- Border radius -->
<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-full">Full circle</div>

Shadows

<div class="shadow">Small 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-none">No shadow</div>

Responsive Design

<!-- Breakpoints -->
<!-- sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px -->

<div class="w-full md:w-1/2 lg:w-1/3">
  Responsive width
</div>

<div class="flex flex-col md:flex-row">
  Mobile: vertical / Desktop: horizontal
</div>

<div class="hidden md:block">
  Visible at md and above
</div>

<div class="md:hidden">
  Visible below md
</div>

Hover and States

<button class="bg-blue-500 hover:bg-blue-600">Hover</button>
<button class="opacity-50 hover:opacity-100">Opaque on hover</button>
<input class="focus:ring-2 focus:ring-blue-500" />
<button class="active:scale-95">On click</button>
<button class="disabled:opacity-50" disabled>Disabled</button>

Animations

<div class="transition">All transitions</div>
<div class="transition-colors">Colors only</div>
<div class="transition-transform">Transform only</div>
<div class="duration-300">0.3 seconds</div>
<div class="ease-in-out">Easing</div>

<div class="hover:scale-105 transition-transform">Scale on hover</div>
<div class="animate-spin">Spin</div>
<div class="animate-pulse">Pulse</div>
<div class="animate-bounce">Bounce</div>

Common Patterns

Card

<div class="bg-white rounded-lg shadow-md p-6">
  <h2 class="text-xl font-bold mb-2">Title</h2>
  <p class="text-gray-600">Description</p>
</div>

Button

<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Input

<input class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" />

Centering

<div class="flex items-center justify-center min-h-screen">
  Centered
</div>

Related Articles

• CSS Flexbox Cheat Sheet - Flexbox
• CSS Grid Cheat Sheet - Grid
• React Cheat Sheet - React integration