1. Getting Started
  2. Tailwind CLI

安装

开始使用 Tailwind CSS

Tailwind CSS 通过扫描所有 HTML 文件、JavaScript 组件以及其他模板中的类名来工作,生成相应的样式,然后将其写入静态 CSS 文件。

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

安装 Tailwind CLI

从头开始使用 Tailwind CSS 的最简单和最快的方法是使用 Tailwind CLI 工具。CLI 也可以作为一个独立可执行文件 使用,如果你想在不安装 Node.js 的情况下使用它。

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>