tailwind css v4 默认移除内置 postcss 插件，需显式安装并配置 @tailwindcss/postcss；postcss.config.cjs 中必须用字符串键 '@tailwindcss/postcss': {}，禁用 require() 或 tailwindcss: {}；vite 用户推荐直接使用 @tailwindcss/vite 插件并删除 postcss.config.cjs。
Tailwind CSS v4 默认不再提供内置 PostCSS 插件，直接在 postcss.config.cjs 里写 tailwindcss: {} 会报错：“The PostCSS plugin has moved to a separate package”。这不是你配错了，而是 v4 架构变更导致的必经适配点。
为什么 tailwindcss: {} 在 v4 下直接报错
从 v4 开始，tailwindcss 包本身**不再导出 PostCSS 插件函数**，它只负责配置解析和工具类生成。官方把插件逻辑抽到了 @tailwindcss/postcss —— 但注意：这个包名是真实存在的（2025 年起已发布），不是文档笔误或临时占位符。
- 旧写法
require('tailwindcss')或对象配置{ tailwindcss: {} }会触发PostCSS plugin tailwindcss requires PostCSS 8类似错误，本质是模块找不到插件入口 -
@tailwindcss/postcss是独立包，必须显式安装，且不能和tailwindcss的旧版本共存（比如残留 v3） - Node.js ≥18.17 或使用 pnpm 时，若未清理
node_modules，可能因幽灵依赖导致插件被 resolve 到 v3 的tailwindcss，从而静默失效
postcss.config.cjs 必须用字符串键名，不能用 require()
v4 要求插件注册必须通过包名字符串，而不是 require() 路径。否则 Vite/Webpack 可能无法正确识别插件上下文，尤其在 HMR 热更新后规则不生效。
- ✅ 正确：
'@tailwindcss/postcss': {}（字符串键名，无引号问题，Node.js 会自动 resolve） - ❌ 错误：
require('@tailwindcss/postcss')（Vite 报Cannot find module；Webpack 可能加载但丢失 postcss 插件元信息） - ❌ 错误：
'tailwindcss': {}（v4 下无此插件导出，直接跳过） - 配置中 autoprefixer 位置仍需在
@tailwindcss/postcss之后，否则hover:等变体可能被误判为不支持而删掉
用 Vite 时可彻底跳过 PostCSS 配置
如果你用的是 Vite（≥5.0），@tailwindcss/vite 插件已内建 PostCSS 集成逻辑，此时 postcss.config.cjs 不仅非必需，反而容易引发冲突。
- 推荐做法：删除
postcss.config.cjs，只保留tailwind.config.cjs -
vite.config.ts中启用插件：tailwindcss()（来自@tailwindcss/vite），它会自动注入正确的 PostCSS 处理链 - 该方式下无需手动装
@tailwindcss/postcss，也不用管插件顺序——Vite 插件内部已固化postcss-modules → @tailwindcss/postcss → autoprefixer流程 - 若项目同时用了
postcss-nested或postcss-preset-env，它们得显式加进vite.config.ts的plugins数组，并确保在tailwindcss()之后、autoprefixer之前
最容易被忽略的是：v4 的 @tailwindcss/postcss 插件**不兼容 PostCSS 7**，哪怕你只在某个子依赖里带了 postcss@7，运行 npm ls postcss 出现嵌套路径下的 v7，就一定会在构建时卡在插件初始化阶段。务必清干净再装。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
