Do I need a build just to try Tailwind?

No. Loading one script—the Play CDN—gives you utility classes on the spot. But the docs state plainly that it's for development only, so use the CLI build for anything you publish.

I found an article that says @tailwind base

That's the older (v3) syntax. It's now replaced by the single line @import "tailwindcss";. An article built around three @tailwind directives or tailwind.config.js is a sign that it's out of date.

Don't I create tailwind.config.js?

It isn't required in the current version. To change colours or spacing steps you write an @theme block inside your CSS. With configuration moved to the CSS side, you touch the JavaScript config far less.

Won't the output CSS be enormous?

No. The build scans your files and writes out only the classes you actually used. So however many thousand classes exist, the output stays small.

Installing Tailwind CSS - building with the CLI, or trying it with the Play CDN

The previous lesson covered what Tailwind is. Before studying class names, let’s get something running on your machine. Whether you have an environment to type into and check changes how much of the rest of this course sticks. There are two routes.

The Play CDN—one script tag. Try it right now, with no build (but not for publishing)
A CLI build—for sites you publish. The --watch from the npm course comes back here

Try it first to get a feel, then move to the build if you decide to continue—that order trips people up the least.

npmRun a build once (Sass → CSS)If “a build” still feels vague, running one in the npm course makes this lesson easy

Route 1: try it now with the Play CDN

One HTML file is all it takes. Add one script to <head>.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold text-orange-500">Shima's page</h1>
  </body>
</html>

Open that in a browser and the classes already work. No install, no commands.

Route 2: build with the CLI

This is the real route. The shape is what you did in the npm course; only the tool changes from Sass to Tailwind.

1. Set up a project

mkdir tailwind-practice
cd tailwind-practice
npm init -y

2. Install Tailwind

npm install --save-exact tailwindcss @tailwindcss/cli

tailwindcss is the library and @tailwindcss/cli is what lets you call it as a command. Install both. --save-exact pins the version, as before.

npmnpm's scary story—protecting yourself, learned from the Shai-Hulud incidentWhy pin versions—the risk behind the convenience of ^

3. Write one line of source CSS

mkdir src

@import "tailwindcss";

That’s the whole file. It declares “expand Tailwind’s utilities here.”

Articles saying @tailwind base; are the older version

Plenty of tutorials still show three lines like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

That’s the older (v3) syntax, now replaced by the single @import "tailwindcss";. An article built around @tailwind directives or tailwind.config.js is a sign it’s out of date. When steps don’t match, suspect this first.

4. Run the build

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

Reading it:

-i (input)—the source file
-o (output)—where to write
--watch—watch for saves and rebuild automatically

Because of --watch, the command doesn’t finish; it waits. Ctrl + C stops it.

5. Load the output from your HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./src/output.css" />
  </head>
  <body class="p-8 bg-orange-50">
    <h1 class="text-3xl font-bold text-orange-500">Shima's page</h1>
  </body>
</html>

You load output.css (not input.css). Get this wrong and you’re loading a one-line stylesheet, and nothing applies.

6. Stop typing the long command

{
  "scripts": {
    "dev": "@tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch",
    "build": "@tailwindcss/cli -i ./src/input.css -o ./src/output.css --minify"
  }
}

Now npm run dev is for building and npm run build is for publishing (--minify shrinks the file).

Why the CSS doesn’t get enormous

“If thousands of classes exist, surely the CSS is huge?”—this is the best-designed part.

At build time, Tailwind scans your project’s files and collects only the class names actually written there. Unused classes are never output. So:

The number of available classes has nothing to do with the size of the output
Adding pages barely grows the CSS, because the classes repeat

That’s why people say Tailwind’s CSS doesn’t grow fat as a site grows. Plain CSS piles up with every page you add.

Class names assembled from strings get dropped

The scan works on “does this string appear in the file.” So a class name built in JavaScript won’t be found.

// ✕ the scan misses it, so no CSS is output
const cls = 'bg-' + color + '-500';

// ○ write the class names out in full
const cls = isError ? 'bg-red-500' : 'bg-green-500';

This is the classic cause of “the colour doesn’t work in production.” Always write class names in full.

Your own colours and spacing

To use your brand colour as bg-brand, write an @theme block inside your CSS.

@import "tailwindcss";

@theme {
  --color-brand: #ff8a3d;
  --color-brand-dark: #e06a1f;
}

That makes bg-brand, text-brand, border-brand-dark and friends available automatically. The naming follows a rule: write --color-◯◯ and ◯◯ is registered as a colour name.

With the Play CDN you can do the same inside a <style type="text/tailwindcss">.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
  @theme {
    --color-brand: #ff8a3d;
  }
</style>

Where people get stuck

Symptom	Cause and fix
No classes apply at all	The HTML is loading `input.css`. Load `output.css`
Only some classes fail	Are you assembling class names from strings? Write them in full
Saving changes nothing	Is `--watch` running? (keep it waiting in its own terminal)
`@tailwind` throws an error	Older syntax. Change to `@import "tailwindcss";`
It builds but the colour is wrong	Check the `@theme` variable spelling (it must start `--color-`)
VSCode warns about `@import "tailwindcss"`	Installing the Tailwind CSS IntelliSense extension silences it

TipsVSCode extensions worth installingThe other VSCode extensions worth installing

Summary of this lesson

To try it, one Play CDN script—but never for publishing
For production, build with the CLI, starting from npm install tailwindcss @tailwindcss/cli
The source CSS is the single line @import "tailwindcss";
The HTML loads output.css—get this wrong and nothing applies
Class names assembled from strings are missed by the scan and dropped
Add colours and scales with an @theme block (config moved from JS to CSS)
Articles built around @tailwind base; or tailwind.config.js are out of date

You now have a working setup. From the next lesson on, you’ll type into it as you go. First up: decoding the rules behind those incantation-like class names.

Installing it in your own project