1. 入门指南
  2. Tailwind CLI

Installation

开始使用 Tailwind CSS

Tailwind CSS 的工作原理是扫描你所有的 HTML 文件、JavaScript 组件以及任何其他模板中的类名,生成相应的样式,然后将它们写入静态 CSS 文件。

它快速、灵活、可靠,且零运行时。

安装 Tailwind CLI

从零开始启动并运行 Tailwind CSS 最简单快捷的方式是使用 Tailwind CLI 工具。如果你想在不安装 Node.js 的情况下使用它,CLI 也可作为独立可执行文件使用。

01

安装 Tailwind CSS

通过 npm 安装 tailwindcss@tailwindcss/cli

终端
npm install tailwindcss @tailwindcss/cli
02

在你的 CSS 中导入 Tailwind

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

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

启动 Tailwind CLI 构建过程

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

终端
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>
版权所有 © 2025 Tailwind Labs Inc.·商标政策