自学教程

Tailwind CSS4 安装(NPM)

Tailwind CSS 教程

Tailwind CSS4 NPM本地安装完整指南：告别CDN，走进正式项目

前面我们了解到，CDN模式适合做Demo和学习，但不适合网站上线。真正做正式项目，要用 NPM 本地安装方式。Tailwind CSS4 是一次重大版本升级，相比 v3 版本大幅简化配置，编译速度也有很大提升。

前置准备：环境要求

本地安装需要电脑装有 Node.js（包含npm工具）。
打开终端输入下面两条命令，检查是否已经装好环境：

node -v
npm -v

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

国内网络下载包速度慢，可以切换国内镜像源：

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

Tailwind CSS4 提供了三套主流安装方案，分别适配不同项目类型：

  1. Tailwind CLI：纯HTML静态项目，没有Vite/Webpack这类打包工具
  2. Vite插件：Vue、React、SvelteKit等Vite驱动的前端项目（最推荐）
  3. PostCSS插件：Next.js、Angular等基于PostCSS的框架项目

✨ v4版本最大亮点：自动扫描源码文件。在v3时代我们需要手动在配置文件写content数组，告诉框架哪些文件要扫描；v4会自动识别项目里HTML、JS、组件文件，自动忽略node_modules、图片、压缩包等无关文件，绝大多数场景不用写扫描路径配置，极大减少新手踩坑概率。

方案一：Tailwind CLI（纯HTML静态项目）

适合只写HTML、CSS，没有前端框架的项目。CLI是独立命令行工具，读取源CSS，扫描你的HTML，输出一份干净、剔除无用样式的最终CSS文件。

  1. 初始化项目（新建文件夹，终端进入文件夹）
npm init -y
  1. 安装依赖包
npm install tailwindcss @tailwindcss/cli
  1. 创建源CSS文件 src/input.css，写入一行导入语句
@import "tailwindcss";

⚠️注意：v4不再使用v3的@tailwind base; @tailwind components; @tailwind utilities;这三行，统一改为@import "tailwindcss";。

  1. 启动监听命令，文件修改自动重新编译CSS
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
  • -i：输入源文件；-o：输出编译完成的css；--watch开启监听，保存文件自动重新生成样式。
  1. 在HTML引入编译好的output.css
<!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 Tailwind4！</h1>
</body>
</html>

保持终端监听命令运行，修改HTML的class，保存之后刷新页面就可以看到样式变化。

生产打包（一次性生成最终CSS，不开启监听）：

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css

方案二：Vite插件（Vue / React / SvelteKit，主流框架首选）

如果你用Vite脚手架创建Vue、React项目，优先选择这套方案，集成最丝滑，性能最优。

  1. 安装包
npm install tailwindcss @tailwindcss/vite
  1. 修改项目根目录vite.config.ts（js项目是vite.config.js），注册tailwind插件
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'export default defineConfig({
  plugins: [
    tailwindcss()
  ]
})
  1. 在全局样式文件（例如src/style.css）顶部导入
@import "tailwindcss";
  1. 正常启动项目
npm run dev

之后所有组件、页面都可以直接写Tailwind工具类，不需要额外引入文件。Vite插件模式会利用项目模块依赖图精准扫描用到的类名，不会扫描无关文件，性能最好。

方案三：PostCSS插件（Next.js、Angular等框架）

很多老框架底层基于PostCSS，就选择此方式。v4版本中PostCSS插件不再内置在tailwindcss包，需要单独安装@tailwindcss/postcss包。

  1. 安装依赖
npm install tailwindcss @tailwindcss/postcss postcss
  1. 在项目根目录创建/修改postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {}
  }
}

v4自动处理css导入、浏览器前缀，不再需要写autoprefixer、postcss‑import插件，可以删掉旧配置里这两项。

  1. 在全局CSS文件导入
@import "tailwindcss";
  1. 照常启动你的项目：
npm run dev

三种安装方式怎么选？一张表看懂

安装方案适用项目核心特点
Tailwind CLI纯HTML静态页面、无打包工具命令行编译，零框架依赖，适合静态网站
Vite插件Vue、React、SvelteKit等Vite项目开发速度最快，精准扫描模块，新项目首选
PostCSS插件Next.js、Angular等老框架适配已使用PostCSS的现有工程

补充：CDN vs NPM本地安装对比

方式CDN PlayNPM本地（上面三种）
环境不需要Node.js必须Node.js环境
适用场景Demo、学习、临时测试正式上线项目
CSS体积加载完整全套样式，体积大自动删除未使用样式，CSS体积极小
自定义能力有限，部分高级语法不可用全部特性开放，可写自定义工具类、第三方插件
网络依赖依赖外网CDN服务器打包完成后完全离线可用

Tailwind CSS4新手注意事项（容易踩坑）

  1. 导入语法变了
    v3旧写法（不要再复制旧教程）：
@tailwind base;
@tailwind components;
@tailwind utilities;

✅v4新写法，只用一行：

@import "tailwindcss";
  1. 绝大多数情况不需要手动写tailwind.config.js配置文件，v4支持直接在CSS里面写主题、自定义工具类（@theme、@utility），配置文件变成可选的，不再强制需要。
    如果要扫描某些被默认忽略的文件，在CSS中用@source指令指定路径。
@import "tailwindcss";
@source "../node_modules/你的组件库";
  1. 浏览器兼容性变化：v4大量使用现代CSS特性，优先面向新版浏览器；老旧浏览器需要开启兼容模式。
  2. 部分工具类默认行为发生改动（比如ring、shadow、border），如果是从v3升级项目，要留意升级文档，部分类名行为有变化。

什么时候必须抛弃CDN切换NPM本地？

  • 网站需要部署上线，面向真实用户访问
  • 项目使用Vue、React等前端框架
  • 需要写@apply、自定义工具类、引入第三方Tailwind插件
  • 想要网页CSS文件尽可能小，加快页面加载速度

小结

CDN是入门的敲门砖，体验原子类的写法；而 NPM本地安装才是Tailwind CSS4完整的形态。
如果是简单静态HTML页面，直接选CLI方案；如果是Vue/React新项目，优先Vite插件；老框架项目就用PostCSS插件。v4版本最大的进步就是把复杂的扫描配置给自动化了，新手不再为写错content路径导致样式失效而苦恼。

标签：

0 条笔记