开发文档Nodejs.cn 旗下网站
  1. Getting Started
  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。

Terminal
npm install tailwindcss @tailwindcss/cli
02

在 CSS 中导入 Tailwind

将 @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 的工具类来设置内容样式。

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>
TailwindCSS v4.0 中文网 - 粤ICP备13048890号