1. 快速开始
  2. Tailwind CLI

安装

开始使用 Tailwind CSS

Tailwind CSS 通过扫描你的所有 HTML 文件、JavaScript 组件以及其他模板中的 class 名称,生成对应的样式,并将其写入静态 CSS 文件。

它快速、灵活且可靠 —— 零运行时(zero-runtime)。

安装 Tailwind CLI

从零开始使用 Tailwind CSS 最简单、最快速的方式就是使用 Tailwind CLI 工具。CLI 也可以作为独立可执行文件获取,如果你希望在不安装 Node.js 的情况下使用它。

01

安装 Tailwind CSS

通过 npm 安装 tailwindcss@tailwindcss/cli

Terminal
npm install tailwindcss @tailwindcss/cli
02

在你的 CSS 中导入 Tailwind

在你的主 CSS 文件中添加 @import "tailwindcss"; 导入语句。

src/input.css
@import "tailwindcss";
03

启动 Tailwind CLI 构建流程

运行 CLI 工具,扫描你的源码文件中的类并构建 CSS。

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

在 HTML 中开始使用 Tailwind

将你编译后的 CSS 文件添加到 <head> 中,然后开始使用 Tailwind 的工具类为内容添加样式。

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>
Copyright © 2025 Tailwind Labs Inc.·Trademark Policy