Installing with the CLI

A CLI (command-line interface) is a tool you run in the terminal. The Tailwind CLI reads your CSS, finds classes in the project files and writes the finished CSS into a separate file. This suits projects without a bundler: a plain site of HTML files, PHP or Django templates.

Installing

Create a project folder and install Tailwind together with the CLI:

mkdir shop
cd shop
npm init -y
npm install tailwindcss @tailwindcss/cli

The input file

Create src/input.css — the input file you edit:

@import "tailwindcss";

Building

Run the CLI: -i points to the input file, -o to the output file, and --watch rebuilds the CSS on every save:

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

The terminal prints a build message, and an output.css file appears next to input.css. Keep the command running while you write markup.

Using it on a page

Create src/index.html and link the built file with an ordinary <link> tag:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="p-8 text-3xl font-bold text-indigo-600">Shop</h1>
</body>
</html>

Open src/index.html in a browser — the heading is styled. Add a new class and save: the CLI appends its styles to output.css, and you only need to reload the page.

Short commands

To avoid typing the long command, add scripts to package.json:

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

Now npm run dev starts watching, and npm run build produces a minified file for publishing.

Which way to choose

The classes are the same in all three, so everything else in the course works with any of them.

Common mistake

Editing output.css by hand. The file is completely rewritten on every build, and your changes disappear. Write your own CSS in the input file input.css, below the @import "tailwindcss"; line:

@import "tailwindcss";
 
.legal-text {
  font-size: 12px;
}