Setting Up Tailwind CSS

Tailwind isn't a CSS file you link to and start using — it's a build tool. It scans your project's source files, finds every class name you've written, and generates only the CSS those classes need. Understanding that pipeline makes the rest of Tailwind much less mysterious.

The pieces you install

In a modern (v4) setup, you typically install two packages: tailwindcss itself and a plugin for whatever builds your CSS — @tailwindcss/postcss for a PostCSS-based project, @tailwindcss/vite if you're on Vite, or the standalone @tailwindcss/cli if you have no build tool at all.

/* app.css */
@import "tailwindcss";

That single @import replaces what used to be three separate @tailwind directives in older versions. It pulls in Tailwind's reset (a set of sensible browser-default overrides) and registers every utility class as available to generate.

The build step actually generates your CSS

When you save a file, Tailwind's tooling rescans your project's templates and source files for class names, then rebuilds app.css to contain exactly the CSS rules those classes need — and nothing else.

<!-- src/components/Card.tsx -->
<div className="flex items-center gap-3 rounded-md border p-4">

Writing gap-3 here is what causes .gap-3 { gap: 0.75rem; } to exist in the generated CSS at all. Delete every use of gap-3 from your project and it disappears from the output on the next build — you never have to remember to clean it up yourself.

This is why Tailwind needs to actually see your class names as literal strings. A pattern like this won't work, because the class name isn't in your source as text:

<!-- Won't work — Tailwind can't see "text-red-500" as a real string -->
<div class={`text-${color}-500`}>

Building conditional class names by string concatenation defeats the scan. The fix is to write out each full class name literally and choose between them at runtime, which the "Conditional Classes in JSX" lesson later in this course covers.

Running it

Most framework starters (Next.js, Vite, Remix, Laravel) now wire this up for you when you scaffold a new project, so in practice you rarely configure the pipeline by hand. Worth knowing anyway: in dev mode, the build watches your files and regenerates CSS on every save; in a production build, it runs once and the output is typically minified.

npx @tailwindcss/cli -i ./src/app.css -o ./dist/app.css --watch

That's the whole pipeline: write utility classes in your markup, Tailwind scans for them, and a single generated stylesheet ships to the browser containing precisely the CSS your project uses.