6. 用 Tailwind CLI 安装

本节目标：学会用 Tailwind CLI 纯手工构建，不依赖 Vite、Webpack 等任何构建工具。

CLI 方式是最”原始”的接入方式——一个 HTML 文件、一个 CSS 文件、一条命令，就能跑起来。适合静态站点、邮件模板、或者你就是不想配构建工具的场景。

前提条件

Node.js 18+（或者下载独立可执行文件，不需要 Node）

步骤 1：安装依赖

mkdir my-cli-project && cd my-cli-project
npm init -y
npm install tailwindcss @tailwindcss/cli

步骤 2：创建源 CSS 文件

创建 src/input.css：

@import "tailwindcss";

步骤 3：创建 HTML 文件

创建 src/index.html：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

注意 link 引入的是编译后的 output.css，不是 input.css。

步骤 4：运行编译命令

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

参数说明：

-i：输入文件（源 CSS）
-o：输出文件（编译后的 CSS）
--watch：监听文件变化自动重编译

终端会显示 “Done in XX ms”，说明编译成功。现在打开 src/index.html 就能看到效果了。

生产构建

开发时用 --watch，生产环境去掉它，加 --minify：

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

独立可执行文件（不需要 Node.js）

Tailwind CLI 还提供了 standalone 二进制文件，下载后直接运行，不需要装 Node.js。

去 GitHub Releases 下载对应平台的文件（tailwindcss-windows-x64.exe 等），放到项目目录后：

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

适合 CI/CD 环境或者不想污染全局 Node 的场景。

项目结构

一个典型的 CLI 项目长这样：

my-cli-project/
├── src/
│   ├── input.css      # 源文件（写 @import）
│   ├── output.css     # 编译产物（不要手动编辑）
│   └── index.html     # 页面
├── package.json
└── node_modules/

Warning

output.css 是自动生成的，不要手动改它。所有样式改动都在 input.css 或 HTML 里做。

跟 Vite/PostCSS 的对比

维度	CLI	Vite/PostCSS
配置复杂度	最低	中等
热更新	需手动刷浏览器	自动
适合场景	静态页面、原型	正式项目
构建速度	快	快
额外依赖	无	Vite 或 PostCSS

如果你只是做个 Landing Page 或者 Demo，CLI 够用了。正经项目还是推荐 Vite 方式。

下一章我们看最轻量的 Play CDN。