1. Getting Started
  2. Tailwind CLI

安装

开始使用 Tailwind CSS

Tailwind CSS 通过扫描所有 HTML 文件、JavaScript 组件和其他模板中的类名,生成相应的样式,并将其写入静态 CSS 文件。

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

使用 Tailwind CLI 安装 Tailwind CSS

使用 Tailwind CLI 安装 Tailwind CSS 是最简单、最快的从零开始使用 Tailwind CSS 的方式。 CLI 工具也可以作为 独立可执行文件 使用,如果你不想安装 Node.js。

01

安装 Tailwind CSS

通过 npm 安装 tailwindcss@tailwindcss/cli

Terminal
npm install tailwindcss @tailwindcss/cli
02

导入 Tailwind CSS

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

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 的实用类来样式化你的内容。 your content.

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