Tailwind CSS: From Zero to Production
Tailwind CSS is the most-used utility-first CSS framework (60M+ downloads/week). Instead of writing CSS classes, you compose utility classes in your HTML.
Install (CDN, fastest)
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 text-white p-8">
<h1 class="text-4xl font-bold">Hello Tailwind</h1>
<button class="bg-blue-500 hover:bg-blue-700 px-4 py-2 rounded">Click</button>
</body>
</html>That works for prototypes. Donโt use CDN in production โ it ships 350KB of unused classes.
Install (build, production)
npm install -D tailwindcss @tailwindcss/vite
# Or with Next.js:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pCore concepts
| Concept | Example |
|---|---|
| Utility classes | text-lg font-bold p-4 rounded |
| Responsive prefixes | md:text-xl lg:text-2xl |
| Hover/Focus states | hover:bg-blue-500 focus:ring-2 |
| Dark mode | dark:bg-slate-900 |
| Custom config | tailwind.config.js |
A complete component
<button class="
bg-blue-500 hover:bg-blue-700
text-white font-semibold
px-4 py-2 rounded-lg
shadow-md hover:shadow-lg
transition-all duration-200
focus:outline-none focus:ring-2 focus:ring-blue-300
">
Click me
</button>Tailwind 4 (2026)
The new version uses CSS-native @import:
@import "tailwindcss";And zero config โ content detection is automatic.
Key takeaways
- Use CDN for prototypes, build for production
- Compose utilities in HTML, not custom CSS
- Tailwind 4 simplifies the build with native CSS