postcss 配置失效主因是构建工具未读取或插件顺序/依赖错误：cra 忽略配置文件，vite 默认支持但需 commonjs 格式，webpack 需手动配置；插件须按 postcss-import→postcss-nested→postcss-preset-env→autoprefixer 顺序，且依赖 browserslist、tailwind.config.js 等完整。
PostCSS 本身不提供任何预处理能力，所谓“引入插件功能”本质是加载并执行第三方插件对 CSS AST 的修改逻辑——没装对插件、顺序错、或环境不支持，postcss.config.js 就只是个空文件。
postcss.config.js 文件根本没生效？先确认构建工具是否真读它
不是所有前端工具链都会自动加载 postcss.config.js。Create React App（CRA）v5+ 虽内置 PostCSS 8，但完全忽略项目根目录下的 postcss.config.js，只用自己硬编码的插件列表（autoprefixer + postcss-preset-env）。你写了 @apply 报错、color-mix() 不转译，大概率就是这个原因。
- 用 CRA：别白写
postcss.config.js，要么eject，要么迁到 Vite/Next.js - 用 Vite：默认读取
postcss.config.js，且会合并内置配置（优先级更高） - 用 Webpack：必须配
postcss-loader，并在loader.options.config或postcss.config.js中显式指定路径
插件安装后仍不工作？检查三个硬性依赖条件
PostCSS 插件不是 npm install 就完事。每个插件都有隐含前提，缺一不可：
-
postcss-preset-env需要.browserslistrc或package.json#browserslist字段，否则无法推导哪些特性该降级（比如写了stage: 4却没配 browserslist，accent-color可能直接被跳过） -
tailwindcss插件会静默失败：如果项目里没有tailwind.config.js，它不会报错，但所有@tailwind规则都不处理 -
postcss-custom-properties和postcss-calc必须按顺序加载：前者必须在后者之前，否则calc(var(--gap) * 2)里的var()还没替换，calc()就没法算
为什么 @import 不起作用？插件顺序错了是最常见原因
postcss-import 是唯一能真正解析 @import 语句并内联内容的插件，但它必须放在插件数组第一位。一旦顺序错，后面插件（比如 postcss-nested）看到的就是原始的 @import "xxx.css" 字符串，而不是导入后的完整 CSS 树。
- 正确顺序：
postcss-import→postcss-nested→postcss-preset-env→autoprefixer→cssnano（生产） - 错误示例：
autoprefixer放第一位，@import后的规则压根没被解析，前缀自然加不上 - Vite 用户注意：
postcss.config.js是 CommonJS 格式，不能用export default，必须写module.exports = { plugins: [...] }
自定义属性（--var）和 postcss-preset-env 冲突？关键在 preserve 配置
当 postcss-preset-env 和 tailwindcss 共存时，CSS 变量容易被提前展开，导致 Tailwind 的运行时计算失效。例如 hsl(from var(--primary), 70%, 60%) 被 postcss-preset-env 直接转成无效字符串，而不是留给浏览器执行。
- 解决方案：在
postcss-preset-env配置中加{ preserve: true, stage: 3 }，禁用变量内联 - 同时确保
tailwindcss插件排在postcss-preset-env之后，让变量保持原样传递给 Tailwind - 验证方法：在 CSS 里写
div { color: var(--missing-var, red); }，编译后仍是var(--missing-var, red)，说明变量没被提前吃掉；如果变成red或报错，就是preserve: false或顺序问题
最容易被忽略的是：插件之间没有报错不等于它们协同工作了。一个 postcss.config.js 文件里插件全齐，但顺序错、环境不读、或依赖缺失，结果就是 CSS 看似编译成功，实际新语法没转、变量没算、@import 没合并——得逐层验证每一步 AST 是否被真实修改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
