1. 开始使用
  2. Tailwind CLI

安装

开始使用 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 -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.·商标政策