Back to Home
tailwindcss cheat sheet
Essential Tailwind CSS utilities, patterns, and best practices for rapid UI development.
colors & themes
Use semantic color scales and CSS variables for maximum flexibility.
- 1bg-gray-50 to bg-gray-950 for full grayscale spectrum
- 2text-blue-600 for standard blue text
- 3border-red-500 for error state borders
- 4Use bg-foreground and text-foreground for semantic colors
- 5Combine with opacity:
bg-black/20
spacing & sizing
Consistent spacing creates visual harmony. Based on 0.25rem (4px) increments.
- 1p-4 = 1rem (16px) padding
- 2m-6 = 1.5rem (24px) margin
- 3gap-2 = 0.5rem (8px) gap in flex/grid
- 4space-y-4 = 1rem vertical spacing between children
- 5w-full = 100% width, h-screen = 100vh height
- 6max-w-5xl = Maximum width container
responsive design
Mobile-first approach. Start with mobile styles, then add breakpoints.
- 1Breakpoints:
sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px - 2Responsive grid:
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3"> - 3Responsive text:
<h1 class="text-4xl md:text-5xl"> - 4Show/hide:
<div class="hidden md:block"> - 5Responsive padding:
<div class="px-4 md:px-6 lg:px-8">
layout & flexbox
Flexbox and Grid make layouts effortless.
- 1Center content:
<div class="flex items-center justify-center"> - 2Space between:
<div class="flex justify-between items-center"> - 3Vertical stack:
<div class="flex flex-col gap-4"> - 4Grid layout:
<div class="grid grid-cols-3 gap-6"> - 5Position types: relative, absolute, fixed, sticky
typography
Font sizes, weights, and line heights for readability.
- 1text-xs = 0.75rem (12px)
- 2text-sm = 0.875rem (14px)
- 3text-base = 1rem (16px)
- 4text-lg = 1.125rem (18px)
- 5text-4xl = 2.25rem (36px)
- 6Font weights: font-normal (400), font-medium (500), font-semibold (600), font-bold (700)
- 7Truncate text:
<p class="truncate"> - 8Multi-line clamp:
<p class="line-clamp-2">
effects & transitions
Transitions, shadows, and hover states make interfaces feel alive.
- 1Smooth transitions:
<button class="transition-colors hover:bg-gray-100"> - 2Custom duration:
<div class="transition-all duration-300"> - 3Transform on hover:
<div class="hover:-translate-y-1 transition-transform"> - 4Shadows: shadow-sm, shadow-md, shadow-lg, shadow-xl
- 5Focus rings:
<input class="focus:ring-2 focus:ring-blue-500"> - 6Group hover:
<div class="group"><h3 class="group-hover:text-blue-500"></div> - 7Rounded corners: rounded, rounded-lg, rounded-2xl, rounded-full