Adding Tailwind: Play CDN vs Build
Two ways to add Tailwind to a project and when to use each.
<script src="https://cdn.tailwindcss.com"></script>There are two common ways to use Tailwind.
1. The Play CDN (fastest to start)
Add one <script> tag to your page. Tailwind then reads your classes in the browser. Great for learning, demos, and this tutorial.
2. A build step (for real projects)
Install Tailwind with npm and run its build tool. It scans your files and outputs a small, optimized CSS file with only the classes you actually used.
| Play CDN | Build step |
|---|---|
| No install | Needs npm |
| Larger download | Tiny final CSS |
| Prototyping | Production |
Example
When to use it
- A developer quickly tests Tailwind ideas in a plain HTML file by dropping in the Play CDN script tag without any build tooling.
- A production Next.js app integrates Tailwind via the npm package and PostCSS to enable tree-shaking and a minimal CSS bundle.
- A tutorial author uses the CDN version for interactive code demos so students can run examples without installing Node.js.
More examples
Play CDN one-liner
A single script tag loads Tailwind via the Play CDN, enabling all utility classes in a plain HTML file with zero build steps.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold text-indigo-600">Hello CDN!</h1>
</body>
</html>Install via npm
The npm install sets up Tailwind and its PostCSS pipeline; init -p generates both tailwind.config.js and postcss.config.js.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pEntry CSS with directives
The three @tailwind directives inject Tailwind's base reset, component layer, and utility classes into the compiled CSS output.
/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Discussion