Getting started with Tailwind takes about five minutes. By the end of this lesson, you'll have a working setup and understand the basic workflow.
The fastest way: CDN
If you just want to experiment, add this to your HTML head. No build step, no configuration — just start writing utility classes.
<script src="https://cdn.tailwindcss.com"></script>
This loads Tailwind directly from a CDN. It's great for learning and prototyping, but not for production because it includes the entire Tailwind library instead of only the classes you use.
The proper way: Build tool
For real projects, you'll want to install Tailwind as a PostCSS plugin. This lets Tailwind scan your files and generate only the CSS you need. We'll cover the full installation in the next lesson — this is just the overview.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
This creates a tailwind.config.js file where you customize your theme, add plugins, and tell Tailwind which files to scan for classes.
Your first page
Here's the minimal setup. Create an HTML file, link your compiled CSS, and start adding utility classes to your elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Tailwind Page</title>
<link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<h1 class="text-4xl font-bold text-blue-600">Hello, Tailwind!</h1>
</body>
</html>
The workflow
Tailwind works best with a build process running in the background. As you save your HTML or template files, Tailwind watches for changes and regenerates your CSS. You write markup, see changes instantly, and never context-switch to a CSS file.