CLI

Use the Tailwind CSS CLI to build and watch your stylesheets

The Tailwind CSS CLI is a standalone tool that compiles your Tailwind CSS files without requiring any build tool configuration. It’s the simplest way to get started with Tailwind CSS.

Installation

Install the @tailwindcss/cli package globally or in your project:

npm

npm install -D @tailwindcss/cli

Basic Usage

The CLI processes your CSS files and generates the output with all Tailwind utilities:

tailwindcss --input input.css --output output.css

If you don’t specify an input file, the CLI will use a default input that imports Tailwind CSS:

tailwindcss --output output.css

Watch Mode

Use watch mode to automatically rebuild your CSS when files change:

tailwindcss --input input.css --output output.css --watch

The watch mode monitors your content files and rebuilds the CSS whenever it detects changes. By default, it stops when stdin is closed. Use --watch=always to keep watching even when stdin closes:

tailwindcss --input input.css --output output.css --watch=always

Input and Output

Using stdin and stdout

You can pipe CSS through the CLI using stdin and stdout:

echo "@import 'tailwindcss';" | tailwindcss > output.css

Or use the - flag explicitly:

tailwindcss --input - --output - < input.css > output.css

Specifying Files

Use the --input and --output flags to specify file paths:

tailwindcss --input ./src/styles.css --output ./dist/output.css

You can also use the short aliases:

tailwindcss -i ./src/styles.css -o ./dist/output.css

Optimization

Minification

Optimize and minify your output for production:

tailwindcss --input input.css --output output.css --minify

This will remove unnecessary whitespace and optimize the CSS using Lightning CSS.

Optimization Without Minification

If you want to optimize the CSS without minifying it:

tailwindcss --input input.css --output output.css --optimize

Source Maps

Inline Source Maps

Generate inline source maps for debugging:

tailwindcss --input input.css --output output.css --map

External Source Maps

Write source maps to a separate file:

tailwindcss --input input.css --output output.css --map output.css.map

The CLI will add a source map comment to your CSS file pointing to the external map file.

Working Directory

Specify the current working directory for relative paths:

tailwindcss --input input.css --output output.css --cwd ./src

Command Reference

Options

--input · string

Input CSS file path. Use - for stdin. Defaults to a built-in CSS file that imports Tailwind.

Alias: -i

--output · string

Output CSS file path. Use - for stdout.

Alias: -o

Default: - (stdout)

--watch · boolean | 'always'

Watch for changes and rebuild as needed. Use always to keep watching when stdin is closed.

Alias: -w

--minify · boolean

Optimize and minify the output CSS.

Alias: -m

--optimize · boolean

Optimize the output without minifying.

--cwd · string

The current working directory for resolving relative paths.

Default: . (current directory)

--map · boolean | string

Generate a source map. Pass true for inline maps or a file path for external maps.

Default: false

--help · boolean

Display usage information.

Alias: -h

Examples

Development Build

Build with watch mode and source maps for development:

tailwindcss -i ./src/input.css -o ./dist/output.css --watch --map

Production Build

Build with minification for production:

tailwindcss -i ./src/input.css -o ./dist/output.css --minify

Using with npm scripts

Add scripts to your package.json:

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

Then run:

npm run dev    # Development with watch mode
npm run build  # Production build

How It Works

The CLI performs the following steps:

1. Reads input - Processes the input CSS file (or stdin)
2. Scans content - Automatically scans your project files for Tailwind class names
3. Compiles CSS - Generates CSS for all detected utilities
4. Optimizes - Optionally minifies and optimizes the output
5. Writes output - Saves to the output file (or stdout)

In watch mode, the CLI monitors file changes and triggers incremental rebuilds when:

• Your input CSS file changes (full rebuild)
• Your configuration or plugin files change (full rebuild)
• Your content files change (incremental rebuild)

The CLI uses the Rust-based scanner from @tailwindcss/oxide for extremely fast candidate detection across your entire project.