Introduction to Tailwind CSS
Traditional CSS requires you to switch between HTML and stylesheet files, name classes, and fight specificity battles. Tailwind CSS flips this entirely — you style directly in your HTML using tiny, composable utility classes. No more naming things, no more context-switching. In this chapter you'll understand what Tailwind is, why developers love it, and how to get it running in minutes.
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework
that provides thousands of low-level, single-purpose CSS classes —
called utility classes — that you apply directly in your
HTML. Instead of writing
button { padding: 12px 24px; background: blue; }
in a separate stylesheet, you write
<button class="px-6 py-3 bg-blue-500">
right in your markup.
Released in 2017 by Adam Wathan, Tailwind has become the most popular CSS framework for modern web development. It ships a design system built into the class names — a consistent spacing scale, colour palette, type scale, and shadow system — so your designs are automatically cohesive.
tailwind.config.js.
sm:, md:,
lg:) let you design
mobile-first without media query files.
dark:
prefix applies dark-mode styles — no duplicate stylesheets
required.
Utility-First vs Traditional CSS
The biggest paradigm shift with Tailwind is moving from semantic class names (where you name what a component is) to utility class names (where classes describe what a style does). Both approaches produce the same visual result, but the developer experience is radically different.
/* styles.css — you must name, maintain, and switch to this file */
.card {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 20px rgba(0,0,0,.08);
max-width: 380px;
}
.card-title {
font-size: 1.25rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 8px;
}
.card-btn {
background: #3b82f6;
color: white;
padding: 10px 20px;
border-radius: 8px;
border: none;
cursor: pointer;
}
<!-- index.html -->
<div class="card">
<h2 class="card-title">Hello World</h2>
<button class="card-btn">Click me</button>
</div><!-- No separate CSS file needed — styles live in the class attribute -->
<div class="bg-white rounded-xl p-6 shadow-lg max-w-sm">
<h2 class="text-xl font-bold text-gray-900 mb-2">Hello World</h2>
<button class="bg-blue-500 text-white px-5 py-2.5 rounded-lg
hover:bg-blue-600 transition-colors cursor-pointer">
Click me
</button>
</div>| Aspect | Traditional CSS | Tailwind CSS |
|---|---|---|
| Naming classes | Must think of semantic names (.card, .btn-primary) | No naming needed — classes are predefined |
| File management | Switch between HTML and CSS files constantly | Everything in one place (the HTML) |
| CSS growth | Stylesheet grows unboundedly with the project | CSS file stays tiny (only used classes are included) |
| Design system | Must build your own spacing, colour, type scales | Built-in consistent design system out of the box |
| Responsive | Write @media queries manually in CSS |
Add sm: / md: prefix to any
class
|
| Dark mode | Separate rules with [data-theme] or .dark selectors | Add dark: prefix to any class |
| Learning curve | Learn CSS properties (widely known) | Learn Tailwind class naming convention |
Installing Tailwind CSS
There are three common ways to add Tailwind to a project. For learning and prototyping, the CDN link is instant — no build tool needed. For production projects, the PostCSS / CLI approach gives you the full power of Tailwind including purging unused classes, custom config, and plugins.
<head>. Tailwind loads the full framework — great for
experiments, not production.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Tailwind Page</title>
<!-- Tailwind CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
<div class="bg-white rounded-2xl p-8 shadow-xl max-w-md w-full">
<h1 class="text-3xl font-bold text-gray-900 mb-3">
Hello, Tailwind! 🎉
</h1>
<p class="text-gray-500 leading-relaxed mb-6">
Styled with utility classes — no separate CSS file needed.
</p>
<button class="bg-cyan-500 hover:bg-cyan-600 text-white font-semibold
px-6 py-3 rounded-xl transition-all duration-200 w-full">
Get Started
</button>
</div>
</body>
</html># Step 1 — Install Tailwind CSS via npm
npm install -D tailwindcss
# Step 2 — Generate config file
npx tailwindcss init
# Step 3 — Configure template paths in tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: { extend: {} },
plugins: [],
}
# Step 4 — Add Tailwind directives to your CSS (input.css)
@tailwind base;
@tailwind components;
@tailwind utilities;
# Step 5 — Run the build watcher
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
# Link output.css in your HTML
<link rel="stylesheet" href="dist/output.css">Core Concept — Utility Classes
Every Tailwind class does one specific CSS thing.
They follow a consistent naming pattern:
[property]-[value] or
[prefix]:[property]-[value]
for variants. Once you internalize the pattern, you can guess most
class names without looking them up.
p-1 = 4px, p-4 = 16px, p-8 = 32px.
bg-cyan-400.
grid-cols-3 creates a
3-column layout instantly.
Responsive Design with Prefixes
Tailwind is mobile-first. By default, every class
applies to all screen sizes. To apply a class only at a specific
breakpoint and above, prefix it with the breakpoint name. This
replaces the need for custom
@media
queries entirely.
<!-- Responsive grid: 1 col → 2 col (md) → 3 col (lg) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="...">Card 1</div>
<div class="...">Card 2</div>
<div class="...">Card 3</div>
</div>
<!-- Dark mode: bg changes based on OS/class preference -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-6 rounded-xl">
Adapts to dark mode automatically!
</div>
<!-- State variants: hover, focus, active, disabled -->
<button class="bg-cyan-500 hover:bg-cyan-600 focus:ring-4 focus:ring-cyan-300
active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed
text-white font-semibold px-6 py-3 rounded-xl transition-all duration-200">
Interactive Button
</button>
<!-- Combine responsive + dark + hover -->
<h1 class="text-2xl md:text-4xl lg:text-6xl
font-black text-gray-900 dark:text-white
hover:text-cyan-500 transition-colors">
Tailwind CSS
</h1>Your First Tailwind Component
Let's build a complete, production-quality profile card with Tailwind CSS. This example demonstrates layout, spacing, typography, colours, hover states, and responsive design — all without writing a single line of custom CSS.
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config = { darkMode: 'class' }</script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 min-h-screen flex items-center justify-center p-6">
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 max-w-sm w-full
shadow-xl border border-gray-100 dark:border-gray-800
hover:shadow-2xl hover:-translate-y-1 transition-all duration-300">
<div class="relative w-20 h-20 mx-auto mb-4">
<div class="w-20 h-20 rounded-full bg-gradient-to-br from-cyan-400 to-blue-600
flex items-center justify-center text-3xl font-bold text-white">
AW
</div>
<span class="absolute bottom-1 right-1 w-4 h-4 rounded-full
bg-green-400 border-2 border-white dark:border-gray-900"></span>
</div>
<div class="text-center mb-6">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">Adam Wathan</h2>
<p class="text-sm text-cyan-500 font-medium mt-1">Creator of Tailwind CSS</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-3 leading-relaxed">
Building utility-first CSS frameworks and making developers lives easier.
</p>
</div>
<div class="grid grid-cols-3 gap-4 mb-6 border-t border-gray-100 dark:border-gray-800 pt-6">
<div class="text-center"><div class="text-lg font-bold text-gray-900 dark:text-white">82k</div><div class="text-xs text-gray-400 mt-0.5">Stars</div></div>
<div class="text-center border-x border-gray-100 dark:border-gray-800"><div class="text-lg font-bold text-gray-900 dark:text-white">4.6M</div><div class="text-xs text-gray-400 mt-0.5">Downloads</div></div>
<div class="text-center"><div class="text-lg font-bold text-gray-900 dark:text-white">v4</div><div class="text-xs text-gray-400 mt-0.5">Version</div></div>
</div>
<div class="flex gap-3">
<button class="flex-1 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold py-2.5 rounded-xl transition-colors">Follow</button>
<button class="flex-1 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300
font-semibold py-2.5 rounded-xl hover:border-cyan-400 transition-colors">Message</button>
</div>
</div>
</body>
</html>Quick Reference — Essential Classes
| Class | CSS Equivalent | Description |
|---|---|---|
| flex | display: flex | Makes an element a flex container |
| grid | display: grid | Makes an element a grid container |
| hidden | display: none | Hides the element |
| w-full | width: 100% | Full width of parent |
| h-screen | height: 100vh | Full viewport height |
| p-4 | padding: 1rem (16px) | Padding on all sides |
| px-6 | padding-left/right: 1.5rem | Horizontal padding |
| text-xl | font-size: 1.25rem | Extra-large text |
| font-bold | font-weight: 700 | Bold font weight |
| rounded-xl | border-radius: 0.75rem | Extra-large border radius |
| shadow-lg | box-shadow: 0 10px 15px… | Large drop shadow |
| transition | transition-property: all… | Smooth transitions |
| duration-300 | transition-duration: 300ms | 300ms transition speed |
| opacity-50 | opacity: 0.5 | 50% opacity |
| cursor-pointer | cursor: pointer | Hand cursor on hover |
| overflow-hidden | overflow: hidden | Clips overflowing content |
| relative | position: relative | Relative positioning |
| absolute | position: absolute | Absolute positioning |
| z-50 | z-index: 50 | Stacking order |
| top-0 | top: 0 | Positioned at top edge |
- Tailwind CSS is a utility-first CSS framework — you style elements by combining tiny, single-purpose class names directly in HTML.
-
No more naming classes — Tailwind's predefined
classes describe what they do (
text-xl,bg-blue-500,p-4) so naming is never a bottleneck. - Install via CDN for quick prototyping, or use the Tailwind CLI / PostCSS for production to get tree-shaking (only used classes in the final CSS).
-
Responsive design uses breakpoint prefixes:
sm:,md:,lg:,xl:,2xl:— mobile-first by default. -
Dark mode is one prefix away: add
dark:before any class to apply it in dark mode. -
State variants like
hover:,focus:,active:, anddisabled:replace pseudo-class rules entirely. - Next chapter dives into the complete utility class system — spacing, sizing, colour, flexbox, grid, and typography in depth.
Test your understanding of this chapter. Click a question to reveal the answer.
text-xl sets font-size, p-4 adds
padding, bg-blue-500 sets the background
colour. You combine them in your HTML to build any UI
without ever leaving your markup file.
md: prefix. Tailwind is
mobile-first, so an unprefixed class
applies to all screen sizes. md:text-xl means
"apply text-xl only at screens ≥ 768px".Example:
<h1 class="text-base md:text-2xl
lg:text-4xl">This renders as
text-base on mobile,
text-2xl on medium, and
text-4xl on large screens — all in one class
list, no custom media queries.
CLI / PostCSS: Install via npm, configure
tailwind.config.js, and run a build process.
Tailwind scans your HTML files and outputs
only the CSS classes you actually use — this can result in a
stylesheet under 10KB. Essential for production, supports
custom themes, plugins, and JIT (just-in-time) mode.
1. Media strategy (default): Uses the OS/browser
prefers-color-scheme media query. If
the user's system is in dark mode,
dark: classes apply automatically.2. Class strategy: Set
darkMode: 'class' in
tailwind.config.js. Dark styles apply when a
dark class is present on the
<html> element — great for toggle
buttons.Usage:
<div class="bg-white
dark:bg-gray-900">
— the dark: prefix applies the style in dark
mode only.
• Complex animations that can't be expressed as utility classes
• CSS variables / design tokens for dynamic theming
• @layer components in Tailwind for reusable component classes
• Third-party integrations that expect specific class names
The
@apply directive in Tailwind also lets you
compose utility classes inside your CSS when needed.
Select the best answer for each question. Correct answers are revealed after you click.
md:flex-col
mean in Tailwind CSS?
padding: 1rem
(16px) on all sides?
dark
class added?
Join Our Learning Community
Connect with thousands of learners, get daily tips, ask questions and stay updated with new tutorials.