Tailwind CSS 是一款流行的实用优先型 CSS 框架，它的核心工作机制是扫描你的 HTML 文件、JavaScript 组件及各类模板文件中的类名，自动生成对应的样式代码，并将这些样式写入一个静态 CSS 文件中。这款框架兼具快速开发、灵活定制、稳定可靠三大特性，且全程无运行时开销，能极大提升前端样式开发效率。
本教程将为你详细介绍 Tailwind CSS 的多种安装方式，并重点讲解最简单快捷的 Tailwind CLI 安装与使用流程。
一、Tailwind CSS 安装方式总览
Tailwind CSS 提供了多种灵活的安装部署方案，适配不同的开发场景，主要包括以下几种：
- 结合 Vite 使用：适用于基于 Vite 构建的前端项目，可快速集成 Tailwind CSS。
- 结合 PostCSS 使用：通过 PostCSS 插件的形式集成，满足项目的后置 CSS 处理需求。
- Tailwind CLI：无需依赖其他构建工具，是从零开始使用 Tailwind CSS 的最简方式，支持独立可执行文件运行，无 Node.js 环境也能使用。
- 框架专属指南：针对 React、Vue、Angular 等主流前端框架，提供定制化的集成步骤。
- Play CDN：通过 CDN 链接直接引入，适合快速原型开发或小型演示项目。
二、Tailwind CLI 详细安装与使用步骤
Tailwind CLI 是最适合新手快速入门的方式，下面我们分 4 步完成从安装到使用的全流程。
步骤 1：安装 Tailwind CSS 依赖
首先，确保你的开发环境已安装 Node.js（若使用独立可执行文件则无需此步骤）。打开终端，执行以下命令，通过 npm 安装 tailwindcss 和 @tailwindcss/cli 两个核心包：
bash
npm install tailwindcss @tailwindcss/cli步骤 2：在 CSS 文件中引入 Tailwind
在你的项目中创建一个 CSS 源文件（推荐路径 src/input.css），并在文件中添加 @import 指令引入 Tailwind CSS 的核心样式：
css
/* src/input.css */
@import "tailwindcss";这条指令会告诉 Tailwind CLI，以此文件为入口，生成包含所需样式的最终 CSS 文件。
步骤 3：启动 Tailwind CLI 构建进程
运行 Tailwind CLI 工具，指定样式的输入文件和输出文件，并开启监听模式，这样当源文件或模板中的类名发生变化时，CSS 会自动重新编译。在终端执行以下命令：
bash
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch-i：指定输入的 CSS 源文件路径-o：指定输出的编译后 CSS 文件路径--watch：开启监听模式，实时监测文件变化并重新编译
步骤 4：在 HTML 中使用 Tailwind 样式
创建一个 HTML 文件（推荐路径 src/index.html），在 <head> 标签中引入编译好的 output.css 文件，然后就可以直接使用 Tailwind 提供的工具类来编写样式了。示例代码如下：
html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入编译后的 Tailwind CSS 文件 -->
<link href="./output.css" rel="stylesheet">
</head>
<body>
<!-- 使用 Tailwind 工具类设置样式 -->
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>在上述代码中，text-3xl（设置字体大小）、font-bold（设置字体加粗）、underline（添加下划线）都是 Tailwind 提供的工具类，无需编写任何自定义 CSS 代码，就能快速实现样式效果。
三、总结
通过以上步骤，你已经成功完成了 Tailwind CSS 的安装与基础使用。Tailwind CLI 的无构建工具依赖特性，让你可以快速体验实用优先的样式开发模式。后续你还可以通过自定义配置文件，扩展颜色、字体、间距等样式变量，进一步适配项目的个性化需求。