5. 用 PostCSS 安装

Vite 插件是最推荐的方式，但有些项目已经在用 PostCSS（比如 Next.js），这时候用 PostCSS 插件更自然。

前提条件

• 已有 Node.js 项目
• 项目使用 PostCSS（或你愿意加 PostCSS）

步骤 1：安装依赖

npm install tailwindcss @tailwindcss/postcss postcss

三个包：核心、PostCSS 插件、PostCSS 本身。

步骤 2：创建 PostCSS 配置文件

在项目根目录创建 postcss.config.mjs：

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

步骤 3：引入 Tailwind 到 CSS

在你的主 CSS 文件（比如 app/globals.css 或 src/index.css）顶部加：

@import "tailwindcss";

步骤 4：启动项目

npm run dev

打开浏览器，写几个工具类试试效果。

Next.js 示例

如果你用的是 Next.js（App Router），流程几乎一样：

1. npx create-next-app@latest my-app 创建项目
2. npm install tailwindcss @tailwindcss/postcss postcss
3. 创建 postcss.config.mjs
4. 在 app/globals.css 顶部加 @import "tailwindcss";

Next.js 会自动识别 PostCSS 配置，不需要手动在 next.config.js 里加什么。

跟 Vite 方式的区别

维度	Vite 插件	PostCSS 插件
配置位置	vite.config.ts	postcss.config.mjs
构建速度	更快（直接集成）	稍慢（多一层 PostCSS）
适用场景	Vite 项目	Next.js、Angular、已有 PostCSS 的项目
额外依赖	@tailwindcss/vite	@tailwindcss/postcss + postcss

功能上完全一样，只是接入点不同。

常见问题

Q：PostCSS 配置文件用 .js 还是 .mjs？ 如果你的项目是 ESM（"type": "module" in package.json），用 .mjs。否则 .js 也行。

Q：已有的 PostCSS 插件（如 autoprefixer）冲突吗？ 不冲突。v4 不需要 autoprefixer，Tailwind 内部会自动处理前缀。如果你之前装了，可以删掉。

Q：构建时报错 “Cannot find module ‘@tailwindcss/postcss’”？ 确认 npm install 跑完了，并且 node_modules 里有这个包。

下一章我们看怎么用纯 CLI 方式。