Tailwind CSS3 NPM本地安装完整教程：传统稳定版本实操

Tailwind CSS3 是使用范围非常广的稳定版本，大量老项目、线上业务还在使用它。和新版v4不一样，v3必须手动配置扫描文件路径，很多新手踩坑都在这里。CDN只能用来做Demo，正式上线项目必须走NPM本地编译，才能自动删掉没用的CSS，让网页加载更快。

前置环境准备

本地NPM安装依赖 Node.js + npm，先打开终端验证环境是否就绪：

node -v
npm -v

输出版本号就代表环境正常；提示命令找不到，就要先安装Node.js。

国内下载npm包速度慢，建议切换国内镜像源：

npm config set registry [https://registry.npmmirror.com](https://registry.npmmirror.com)

Tailwind CSS3 有两套主流安装方式：

Tailwind CLI：适合纯HTML静态项目，没有Vite、Webpack等打包工具
PostCSS插件：适配Vue、React、Webpack等各类前端工程，绝大多数框架项目用这套方案。

⚠️重点区分版本差异：

v3：必须手动填写content扫描路径，告诉工具去哪里找写了tailwind类名的文件，路径写错，编译出来CSS是空的，样式全部失效。

v4：自动扫描源码，基本不用配置content路径，安装写法、CSS导入语句和v3完全不一样，不要把v4教程复制到v3项目里使用。

方案一：Tailwind CLI（纯HTML静态网站）

适合只写HTML、JS，不使用前端框架的简单项目。CLI是命令行编译工具，读取源CSS，扫描你的源码，输出精简后的最终CSS文件。

新建项目文件夹，终端进入文件夹，初始化项目

npm init -y

安装Tailwind3开发依赖

npm install -D tailwindcss@3

执行初始化命令，自动生成配置文件 tailwind.config.js

npx tailwindcss init

修改配置文件，配置扫描路径（新手最高频踩坑点）
打开tailwind.config.js，修改content数组，填写你的HTML、JS文件的匹配路径。

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 告诉tailwind扫描src下面所有html、js文件，提取里面的工具类名
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

通俗理解：content就是给Tailwind一份“搜查地图”，它只会去这些路径下看你写了哪些class，只把用到的样式打包输出。如果路径写错，工具找不到你的HTML，最后输出CSS是空，页面完全没有样式。

在src目录新建input.css源样式文件，写入三段核心指令（v3固定写法）

@tailwind base;        /* 基础重置样式 */
@tailwind components;  /* 自定义组件层 */
@tailwind utilities;   /* 全部原子工具类 */

注意！Tailwind3是写上面三句，不要写v4的@import "tailwindcss"，两者不能混用。

开启监听编译命令，文件保存自动重新生成样式

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

-i 输入源文件；-o输出编译完成的CSS；--watch开启监听模式，修改文件自动编译。>

终端窗口不要关闭，关闭就停止监听。

HTML页面引入编译完成的output.css，就可以写tailwind工具类

<!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 text-blue-600">Hello Tailwind CSS3!</h1>
</body>
</html>

正式打包上线（一次性生成压缩CSS，不需要监听）：

npx tailwindcss -i ./src/input.css -o ./src/output.css --minify

方案二：PostCSS插件（Vue、React、Webpack等框架项目）

如果你的项目已经使用Vite、Webpack这类构建工具，优先把Tailwind作为PostCSS插件集成到工程中，和项目编译流程融为一体。

安装全套依赖

npm install -D tailwindcss@3 postcss autoprefixer

autoprefixer会自动补全浏览器CSS前缀，是v3必须的依赖，v4版本不需要这个包。

生成tailwind和postcss两份配置文件

npx tailwindcss init -p

执行完成，根目录同时出现tailwind.config.js与postcss.config.js。

修改tailwind.config.js里面的content路径，匹配你的项目源文件
以Vite项目举例，需要扫描index.html和src下面所有vue/jsx/tsx文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

查看postcss.config.js，确认已经注册插件

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

在项目全局CSS文件，写入v3三条指令

@tailwind base;
@tailwind components;
@tailwind utilities;

照常启动你的项目

npm run dev

之后所有组件页面直接写Tailwind工具类，不需要额外引入文件。

CDN、Tailwind3 NPM、Tailwind4 NPM简单对比

方式	CDN Play	Tailwind3 NPM	Tailwind4 NPM
环境	无需Node.js	需要Node.js	需要Node.js
content扫描配置	无，加载全部样式	必须手动配置路径	自动扫描，几乎不用配置
CSS导入语法	无需css文件	`@tailwind base/components/utilities`	`@import "tailwindcss"`
autoprefixer	不需要	必须安装依赖	不再需要
CSS文件体积	完整全套，体积大	自动清除无用样式，体积小	自动清除无用样式，体积小
适用场景	Demo、学习测试	老项目维护，稳定业务	新项目开发，追求新特性

Tailwind CSS3新手高频踩坑清单

页面完全没有样式：90%是tailwind.config.js的content路径写错，工具找不到你的html、组件文件，输出空CSS。路径大小写、文件夹层级要和实际目录严格对应。
把v4的@import "tailwindcss"写进v3项目，直接报错，v3只能使用三条@tailwind指令。
监听命令的终端窗口关掉，就不会自动编译CSS，修改页面看不到样式变化。
从网上复制v4的示例代码直接粘贴到v3项目，部分工具类名称行为发生变化，效果不符合预期。
PostCSS环境忘记装autoprefixer，部分CSS属性缺少浏览器兼容前缀。

什么时候选Tailwind CSS3？什么时候升级v4？

✅ 继续使用v3：

维护已经上线的老业务项目，不想大规模改动代码；
团队已经熟悉v3配置体系，暂时没有时间迁移升级。

✅ 推荐直接使用v4：

从零搭建全新项目；
希望省去手动配置content扫描路径，减少配置文件。

注意：v3不会停止维护，但新功能只会迭代在v4版本。

小结

Tailwind CSS3 NPM安装的核心关键点就是配置content扫描路径，这也是它和v4版本最大区别。
简单静态HTML页面，直接用CLI方案；Vue、React等框架项目，使用PostCSS插件集成。CDN只能临时体验，正式项目一定要用NPM本地编译，才能发挥Tailwind精简CSS的核心优势。

Tailwind CSS 安装(NPM)