01 — GETTING STARTED
One Line Setup
Tailwind CSS uses utility classes instead of writing CSS. Add one script tag to your <head> and you're ready. No install, no build tools, no config files.
The CDN Script Tag — add this to every page SETUP
Add this to your <head>
<script src="https://cdn.tailwindcss.com"></script>
How It Works — class names = CSS properties CONCEPT
Instead of writing CSS, use class names
<!-- Traditional CSS way: --> <div style="padding: 16px; background: blue; color: white; border-radius: 8px;"> Hello </div> <!-- Tailwind way: --> <div class="p-4 bg-blue-500 text-white rounded-lg"> Hello </div> <!-- They produce the exact same result! p-4 = padding: 1rem (16px) bg-blue-500 = background-color: #3b82f6 text-white = color: white rounded-lg = border-radius: 0.5rem -->
02 — COLORS
The Shade Scale
Every color has shades from 50 (lightest) to 950 (darkest). Shade 500 is the "true" color. Use bg-{color}-{shade} for backgrounds and text-{color}-{shade} for text.
Blue Shade Scale — 50 to 950 COLORS
50
100
200
300
400
500
600
700
800
900
All Built-in Colors at shade 500 COLORS
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
slate
gray
Usage
bg-blue-500 /* background color */ text-blue-500 /* text color */ border-blue-500 /* border color */ ring-blue-500 /* focus ring color */
03 — SPACING
Padding, Margin & Gap
Tailwind uses a number scale: p-1 = 4px, p-2 = 8px, p-4 = 16px, p-8 = 32px. The formula is: number × 4px.
Padding Scale — p-{number} SPACING
p-1
p-2
p-4
p-6
p-8
Spacing Cheat Sheet
p-4 = padding: 16px (all sides) px-4 = padding-left + right: 16px py-4 = padding-top + bottom: 16px pt-4 = padding-top only: 16px m-4 = margin: 16px mx-auto = margin-left + right: auto (centers element) gap-4 = gap: 16px (in flex/grid) space-x-4 = horizontal space between children
04 — TYPOGRAPHY
Text Classes
Control font size, weight, line-height, letter-spacing, and alignment — all with class names.
Font Sizes TYPE
text-xs (12px)
text-sm (14px)
text-base (16px)
text-lg (18px)
text-xl (20px)
text-2xl (24px)
text-4xl (36px)
Typography Cheat Sheet
text-sm / text-lg / text-4xl /* font size */ font-bold / font-extrabold /* weight */ leading-tight / leading-relaxed /* line height */ tracking-wide / tracking-widest /* letter spacing */ text-center / text-right /* alignment */ uppercase / lowercase /* transform */
05 — FLEXBOX
Flex Layouts
Flexbox in Tailwind: flex, flex-col, justify-between, items-center, gap-4. Same concepts, shorter syntax.
Navbar Pattern — flex justify-between items-center FLEX
Centered Content — flex flex-col items-center FLEX
Centered Heading
This text and button are centered using flex-col + items-center.
Code
<div class="flex flex-col items-center justify-center text-center p-12 bg-gray-900 text-white">
<h2 class="text-3xl font-bold mb-2">Centered Heading</h2>
<p class="text-gray-400 max-w-md">Description text.</p>
<button class="mt-6 bg-blue-600 text-white px-6 py-2 rounded-lg">
Action
</button>
</div>
06 — GRID
Grid Layouts
CSS Grid in Tailwind: grid, grid-cols-3, gap-4. Add responsive prefixes: grid-cols-1 md:grid-cols-2 lg:grid-cols-3.
Responsive Card Grid GRID
Card One
1 col on mobile, 2 on tablet, 3 on desktop.
Card Two
Responsive grid with zero media queries.
Card Three
Just add md: and lg: prefixes to classes.
Code
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow-md p-6">Card</div>
<div class="bg-white rounded-xl shadow-md p-6">Card</div>
<div class="bg-white rounded-xl shadow-md p-6">Card</div>
</div>
<!-- grid-cols-1 = 1 column (mobile)
md:grid-cols-2 = 2 columns at 768px+
lg:grid-cols-3 = 3 columns at 1024px+ -->
07 — RESPONSIVE
Breakpoint Prefixes
Tailwind is mobile-first. Base classes apply to all sizes. Add sm: md: lg: xl: prefixes to apply at larger screens.
Breakpoint Reference RESPONSIVE
Mobile-First Breakpoints
sm: 640px and up (small phones → landscape) md: 768px and up (tablets) lg: 1024px and up (laptops) xl: 1280px and up (desktops) 2xl: 1536px and up (large monitors) /* Example: text is small on mobile, bigger on desktop */ <h1 class="text-2xl md:text-4xl lg:text-6xl"> /* Example: stack on mobile, side-by-side on tablet+ */ <div class="flex flex-col md:flex-row gap-4"> /* Example: hidden on mobile, shown on desktop */ <nav class="hidden md:flex gap-8">
Responsive Text — resize your browser RESPONSIVE
This heading
changes size
Resize your browser window to see the text scale at each breakpoint.
08 — HOVER & STATES
Interactive Styles
Add hover:, focus:, and active: prefixes to any class. Pair with transition for smooth animations.
Hover Effects — move your mouse over each HOVER
Hover Pattern
hover:bg-blue-800 /* change bg on hover */ hover:scale-105 /* grow 5% on hover */ hover:-translate-y-1 /* lift up on hover */ hover:shadow-xl /* bigger shadow on hover */ transition-all duration-200 /* smooth animation */ focus:ring-2 focus:ring-blue-500 /* focus ring */
09 — COMPONENTS
Ready-to-Use Patterns
Complete UI components built with only Tailwind classes. Copy the code and customize the content.
Hero Section COMPONENT
Your Brand
Build something
Build something
you're proud of.
A short description of who you are and what you do.
Card with Image COMPONENT
Contact Form COMPONENT
Get in Touch
Have a question? Send a message.
10 — STARTER TEMPLATE
Copy & Go
A complete starter page using only Tailwind classes. Copy the entire code block, paste into a new .html file, and start customizing.
Full Page Starter — nav + hero + cards + footer STARTER
Complete Tailwind Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://cdn.tailwindcss.com"></script>
<title>Your Name — Portfolio</title>
</head>
<body class="bg-gray-50 text-gray-900">
<!-- NAV -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<nav class="max-w-6xl mx-auto px-6 flex justify-between items-center py-4">
<a href="#" class="text-xl font-bold text-blue-600">YourName</a>
<ul class="hidden md:flex gap-8 text-sm font-medium text-gray-600">
<li><a href="#projects" class="hover:text-blue-600">Projects</a></li>
<li><a href="#about" class="hover:text-blue-600">About</a></li>
<li><a href="#contact" class="hover:text-blue-600">Contact</a></li>
</ul>
</nav>
</header>
<!-- HERO -->
<section class="bg-gray-900 text-white py-24 px-4 text-center">
<div class="max-w-3xl mx-auto">
<h1 class="text-4xl sm:text-5xl font-extrabold mt-4 mb-6 leading-tight">
Hi, I'm <span class="text-blue-400">Your Name</span>
</h1>
<p class="text-lg text-gray-400 leading-relaxed mb-10">
A short tagline about who you are.
</p>
<a href="#projects" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-8 py-3 rounded-lg transition-colors">
View My Projects
</a>
</div>
</section>
<!-- CARDS -->
<section id="projects" class="py-20 px-4">
<div class="max-w-6xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-12">Featured Projects</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<article class="bg-white rounded-2xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden">
<div class="h-48 bg-gradient-to-br from-blue-500 to-purple-600"></div>
<div class="p-6">
<span class="text-xs font-bold text-blue-600 bg-blue-50 px-3 py-1 rounded-full">Category</span>
<h3 class="text-lg font-bold mt-3 mb-2">Project Title</h3>
<p class="text-sm text-gray-500 mb-4">What you built and learned.</p>
<a href="#" class="text-sm font-semibold text-blue-600">View →</a>
</div>
</article>
<!-- Copy the article block above for more cards -->
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-gray-900 text-gray-400 text-center py-8">
<p class="text-sm">© 2026 Your Name</p>
</footer>
</body>
</html>