Getting Started
Installation and Setup
There are two common ways to add Tailwind: the Play CDN for quick experiments and learning, and a proper build (npm) for production projects.
Fastest way: the Play CDN
For learning or a quick demo, drop one <script> tag in your page. No build step required — this is exactly what the editor in this course uses.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold text-sky-600 p-6">Hello Tailwind!</h1>
</body>
</html>The Play CDN is great for learning and prototypes, but do not use it in production — it is larger and slower than a built stylesheet.
Production: install with npm
For a real project you install Tailwind, generate a config file, and let the build tool scan your files and output only the classes you actually use.
npm install -D tailwindcss
npx tailwindcss initPoint the config at your template files, add the Tailwind directives to your CSS, and run the build.
@tailwind base;
@tailwind components;
@tailwind utilities;npx tailwindcss -i ./src/input.css -o ./dist/output.css --watchFrameworks like Next.js, Vite and Astro have official Tailwind guides that wire this up for you in a couple of steps.