Installing and Setting Up Tailwind

Before you can use Tailwind CSS in a real project, you need to install it and wire it into your build. In this lesson you will learn the three main ways to set up Tailwind: the Play CDN for quick experiments, the Tailwind CLI for simple sites, and PostCSS integration for framework projects like Next.js or Vite.

Option 1: The Play CDN (Fastest Way to Try Tailwind)

For prototypes and learning, add one script tag and start writing utilities immediately:

html

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="p-8 text-3xl font-bold text-emerald-600">Tailwind is working!</h1>
</body>
</html>

The CDN compiles utilities in the browser on the fly. It is perfect for CodePen-style experiments, but it is not recommended for production because it ships a JavaScript compiler to every visitor.

Option 2: Tailwind CLI

The CLI is the simplest production-ready setup and needs only Node.js:

bash

npm install -D tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

Your src/input.css just imports Tailwind:

css

@import "tailwindcss";

The CLI watches your files, scans your HTML for class names, and writes a compiled stylesheet to dist/output.css. Link that file in your HTML:

html

<link href="./dist/output.css" rel="stylesheet">

Option 3: PostCSS / Vite for App Frameworks

Modern frameworks integrate Tailwind through their build tool. With Vite, for example:

bash

npm install -D tailwindcss @tailwindcss/vite

Then register the plugin in vite.config.js and import Tailwind in your main CSS file. Next.js, SvelteKit, Laravel, and Rails all have official installation guides that follow the same pattern: install the package, add the plugin, import Tailwind in your CSS.

How Content Scanning Works

Tailwind generates CSS by scanning your source files for class names. It looks for complete, unbroken class strings, which leads to one golden rule: never build class names dynamically by string concatenation.

html

<!-- Wrong: Tailwind cannot see this class -->
<div class="text-{{ color }}-600"></div>

<!-- Right: use complete class names -->
<div class="text-red-600"></div>

If a class never appears verbatim in your code, it will not exist in the compiled CSS.

Verifying Your Setup

Create a test page with an obvious utility, such as bg-red-500, and open it in the browser. If you see a red box, the pipeline works. If not, check that your compiled CSS file is linked, that the CLI or dev server is running, and that the file you are editing is inside a scanned directory.

Editor Tooling

Install the official Tailwind CSS IntelliSense extension for VS Code. It autocompletes class names, previews colors inline, and warns about typos. This one extension removes most of the learning-curve friction for beginners.

Key Takeaways

The Play CDN is great for learning but should never ship to production.
The Tailwind CLI compiles a tiny production stylesheet from a single command.
Framework projects use the Vite or PostCSS plugin with the same import entry point.
Always write complete class names so the scanner can find them.
The IntelliSense extension makes writing utilities dramatically easier.

Next up: Colors, Backgrounds and Text Utilities, where you will start styling elements with the full Tailwind palette.