Skip to content

Tailwind CSS v4 Standalone CLI — Zero-Config CSS Generation

DodaTech Updated 2026-06-28 5 min read

In this tutorial, you will learn about Tailwind CSS v4 Standalone CLI. We cover key concepts, practical examples, and best practices to help you master this topic.

Tailwind CSS v4 standalone CLI is a single binary that generates Tailwind CSS output from HTML/CSS files without Node.js, npm, or any build tool dependencies.

What You'll Learn

You will learn how to install and use the standalone CLI, configure it with CSS files, use it in CI/CD pipelines, and optimize output for production.

Why It Matters

The standalone CLI removes Node.js as a dependency. DodaTech uses it for static sites, WordPress themes, and environments where npm is not available.

Real-World Use

DodaZIP's documentation site uses the standalone CLI in CI, saving 30 seconds per build by avoiding npm install steps.

flowchart LR
    A[Plugin System] --> B[Standalone CLI]
    B --> C[Installation]
    B --> D[Usage]
    B --> E[CI/CD]
    B --> F[Output]
    style B fill:#38bdf8,stroke:#0284c7,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Installation

# Download the latest CLI binary for your platform
# Linux x86_64
curl -sL https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64 -o tailwindcss

# macOS (Apple Silicon)
curl -sL https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64 -o tailwindcss

# macOS (Intel)
curl -sL https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-x64 -o tailwindcss

# Windows
# Download tailwindcss-windows-x64.exe from the releases page

# Make executable (Linux/macOS)
chmod +x tailwindcss

# Verify installation
./tailwindcss --help

Expected output: A single binary file (~30MB) that contains the entire Tailwind processing engine. No npm, Node.js, or other dependencies needed.

Basic Usage

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

@theme {
  --color-brand: #7c3aed;
  --font-family-sans: "Inter", sans-serif;
}

# Development (watch mode)
./tailwindcss -i input.css -o output.css --watch

# Single build
./tailwindcss -i input.css -o output.css

# Production (minified)
./tailwindcss -i input.css -o output.css --minify

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <link href="output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-8">
  <div class="bg-brand text-white p-6 rounded-lg max-w-md mx-auto">
    <h1 class="text-2xl font-bold">Tailwind CLI</h1>
    <p class="mt-2 opacity-90">No build tools needed.</p>
  </div>
</body>
</html>

Expected output: Running the CLI generates output.css from input.css, scanning HTML files for class usage. Works with any web project structure.

Advanced Options

# Specify content paths (override default scanning)
./tailwindcss -i input.css -o output.css --content="./src/**/*.html,./src/**/*.js"

# Custom config file (if using JS config alongside)
./tailwindcss -i input.css -o output.css --config="./custom-config.js"

# Minify and analyze
./tailwindcss -i input.css -o output.css --minify --analyze

# Output source map
./tailwindcss -i input.css -o output.css --source-map

# Print verbose output
./tailwindcss -i input.css -o output.css --verbose

Expected output: The CLI supports content path customization, config files, and analysis tools. The --analyze flag prints bundle size and class usage statistics.

CI/CD Pipeline Integration

# .github/workflows/deploy.yml
name: Build and Deploy
on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Download Tailwind CLI
        run: |
          curl -sL https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64 -o tailwindcss
          chmod +x tailwindcss

      - name: Build CSS
        run: ./tailwindcss -i src/input.css -o dist/output.css --minify

      - name: Deploy
        run: |
          # Deploy dist/ to your hosting provider
          rsync -avz dist/ user@server:/var/www/html/

Expected output: CI pipeline downloads the CLI binary and builds CSS without npm install. Deployment is faster and more reliable.

Content Detection

# Default content scanning
# The CLI automatically scans all HTML, JS, TS, JSX, TSX, PHP, and Blade files
# in the project directory and subdirectories.

# Override with --content flag
./tailwindcss -i input.css -o output.css --content="./templates/**/*.php,./assets/**/*.js"

Expected output: By default, the CLI scans common template files. Use --content to narrow or expand the scan scope.

Configuration via CSS Only

/* input.css -- all configuration in CSS */
@import "tailwindcss";

@theme {
  --color-brand-50: #f5f3ff;
  --color-brand-500: #7c3aed;
  --color-brand-900: #3b0764;

  --font-family-sans: "Inter", sans-serif;
  --font-family-display: "Playfair Display", serif;

  --breakpoint-xs: 30rem;
}

@variant dark (&:where(.dark, .dark *));

@plugin "./plugins/brand-utilities.css";

# No config file needed -- everything is in CSS
./tailwindcss -i input.css -o output.css --minify

Expected output: The CLI reads all configuration from the CSS file. No tailwind.config.js needed (but supported if present).

Common Mistakes

1. Not Making CLI Executable

On Linux/macOS, chmod +x tailwindcss is required before running. Without it, the binary will not execute.

2. Using npm-Published CLI Package

The standalone CLI is a downloadable binary, not an npm package. Do not npm install @tailwindcss/cli for the standalone binary.

3. Forgetting --minify for Production

Without --minify, the output CSS includes whitespace and is not optimized. Always use --minify for production.

4. Wrong Architecture Binary

Download the correct binary for your OS and architecture. Apple Silicon requires the arm64 binary. Linux servers need the x64 binary.

5. Not Specifying Content Paths

If the project structure is non-standard, the CLI may not find all template files. Use --content to specify exact paths.

Practice Questions

  1. How do you install the standalone CLI? Download the binary from GitHub releases, make it executable, and run it directly.

  2. What command generates minified CSS? ./tailwindcss -i input.css -o output.css --minify.

  3. How does the CLI detect content files? It scans the project directory for HTML, JS, TS, JSX, TSX, PHP, and Blade files by default.

  4. Can the CLI work without a config file? Yes. All configuration can be done in CSS with @theme and @plugin directives.

  5. How do you watch for changes? ./tailwindcss -i input.css -o output.css --watch watches for file changes and recompiles.

Challenge

Set up a static HTML project using the standalone CLI: download the binary, create input.css with @theme, create 3 HTML pages using Tailwind utilities, set up watch mode for development, and build for production with --minify.

FAQ

Does the standalone CLI work on Windows?

Yes. Download tailwindcss-windows-x64.exe and rename it. Use it in PowerShell or CMD.

Can I use the CLI with Docker?

Yes. Download the binary in a Dockerfile or mount it as a volume. It has no external dependencies.

Is the CLI faster than the npm version?

The CLI uses the same Lightning CSS engine. Performance is comparable to the npm version.

Can I use custom plugins with the CLI?

Yes. Use @plugin in your input.css. The plugin files must be accessible on the filesystem.

How do I update the CLI?

Download the latest binary from GitHub releases. There is no built-in update mechanism.

Mini Project

Build a static site with 5 pages using the standalone CLI: download the binary, create a shared input.css with @theme (brand colors, fonts), use @plugin for forms and typography, set up watch mode development, and create a deploy script with --minify.

What's Next

Now master the Vite Plugin for deep integration with Vite-based projects. Then explore IDE Support for editor integration.

← Previous Tailwind CSS v4 Plugin System — @plugin Directive and Custom Extensions Next → Tailwind CSS v4 Vite Plugin — Deep Integration and Configuration

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Tailwind V4