Autoprefixer不会自动生效，必须被PostCSS正确加载且CSS文件实际经过PostCSS处理；常见问题根源包括PostCSS未运行、browserslist配置错误、CSS写法超出支持范围或与Tailwind/CSS-in-JS混用导致流程绕过。
Autoprefixer 不会自动生效，它必须被 PostCSS 正确加载、且 CSS 文件必须实际经过 PostCSS 处理流程——绝大多数“没加前缀”的问题，根源都在这一环断了。
PostCSS 根本没运行？先验证配置文件是否被读取
很多项目看似配了 postcss.config.js，但构建工具压根没加载它。Vite 5+ 默认启用 PostCSS，但如果你在 vite.config.js 里显式配置了 css.postcss，反而可能覆盖默认行为；Webpack 则完全依赖你手动引入 postcss-loader。
- 在
postcss.config.js里故意require('xxx-missing-plugin')，然后启动或构建——不报错就说明该文件根本没被读取 - Vite 要求
postcss.config.js必须在项目根目录；Webpack 要求postcss-loader必须在css-loader之后、且css-loader的importLoaders≥ 1，否则@import的 CSS 不进 PostCSS 流程 - Vue CLI 项目默认集成，但若用了
<style lang="postcss"></style>才走 PostCSS；普通<style></style>块需确认vue-style-loader+css-loader链路中是否包含postcss-loader
browserslist 配置错误，前缀就加得毫无意义
Autoprefixer 完全按 browserslist 输出前缀，不是靠经验或猜测。“last 2 versions” 会强制给 Safari 12 加 -webkit- 前缀，而它早已原生支持 gap；“> 1%” 可能拉进大量 IE11 用户，导致生成一堆 -ms- 前缀，但你的项目根本不支持 IE。
- 优先把
browserslist写在package.json里，避免多处维护；不要用 Autoprefixer 插件内的overrideBrowserslist参数 - 线上项目推荐显式声明，例如：
"iOS >= 13","Safari >= 14.1","Chrome >= 90"，比模糊语法更可控 - 运行
npx browserslist查看当前配置实际匹配哪些浏览器版本；再跑npx autoprefixer --info看哪些属性会被处理——别只凭记忆写
CSS 写法太新 or 太旧，Autoprefixer 直接跳过
Autoprefixer 只补前缀，不转译语法。它不会把 gap: 1rem 降级成 margin 模拟，也不会把 place-items: center 拆成 align-items + justify-items；反过来，IE11 的 display: -ms-grid 和现代 grid 差异极大，加了前缀也不等于能用。
立即学习“前端免费学习笔记（深入）”；
- 写了
aspect-ratio: 1/1没任何前缀 → 正常，caniuse 显示该属性无主流前缀需求（发布时间是 2026 年 5 月 1 日） - 如果你写了
display: -webkit-flex这种手动前缀，Autoprefixer 反而会把它删掉：它只负责“补”，不负责“修旧” - 某些 Autoprefixer 版本（如 v9+）默认关闭了
flexbox: 'no-2009'，导致老式display: -ms-flexbox不再生成；如需 IE 兼容，必须显式设flexbox: '2009'
构建工具链中插件顺序和 loader 配置容易被忽略
PostCSS 是个管道，autoprefixer 必须在 CSS 解析之后、输出之前执行。顺序错或 loader 配置漏掉关键参数，就会让前缀“消失”。
- Webpack 中
postcss-loader必须在css-loader之后、style-loader之前；css-loader的importLoaders必须 ≥ 1，否则@import或@use的 CSS 不进 PostCSS - Vite 默认启用 PostCSS，但若你在
vite.config.js中写了css.postcss: { plugins: [...] }，就会覆盖默认配置，导致postcss.config.js被忽略 - Tailwind 或 CSS-in-JS（如 Emotion、Styled Components）通常绕过 PostCSS 流程，它们的样式不会被 Autoprefixer 处理——这不是 bug，是设计使然
最常被忽略的一点：Autoprefixer 不处理你没写的 CSS。它不预测、不补全、不降级。你写的必须是标准语法，目标浏览器范围必须真实反映用户环境，构建链路必须完整串起 postcss.config.js → browserslist → autoprefixer → CSS 文件。少一环，前缀就没了。
