autoprefixer 必须被 PostCSS 正确加载且 CSS 文件实际经过处理流程，常见问题包括配置未被读取、browserslist 错误、CSS 语法不匹配前缀规则、与 Tailwind/CSS-in-JS 混用导致绕过处理。
autoprefixer 不是装完就能用的开关，它必须被 PostCSS 正确加载，且你的 CSS 文件必须实际经过这道处理流程——绝大多数“没加前缀”的问题，根源都在这里断了。
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 默认集成，但只有
才走 PostCSS；普通块需确认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 显示该属性无主流前缀需求 - 写了
place-items: center，但 Safari 14.1 下不生效 → 不是前缀问题，是该属性在 Safari 中需align-items+justify-items拆解 - 启用了
grid-template-areas，IE11 完全空白 →autoprefixer确实加了-ms-grid，但 IE 的 Grid 实现和现代标准差异极大，不能指望自动兼容
和 Tailwind 或 CSS-in-JS 混用时，前缀容易被绕过
Tailwind 默认已内置 autoprefixer 逻辑，再额外配一遍可能冲突；Emotion、Styled Components 等 CSS-in-JS 库若用 css 函数动态生成样式，PostCSS 根本不参与——这些样式压根没走构建期处理流程。
实操建议：
- 用 Tailwind 就别再单独配
autoprefixer插件，除非你明确要处理非 Tailwind 的纯 CSS 文件 - CSS-in-JS 动态样式无法被
PostCSS处理，需改用库自身支持的方案（如 Emotion 的css+@emotion/babel-plugin） - 检查构建产物里的 CSS 字节流：如果连
display: flex都没变成display: -ms-flexbox，那大概率是某类样式文件被排除在 PostCSS 流程之外了
最常被忽略的一点：你写的 CSS 是否真的进了 PostCSS 流水线——不是“有没有配”，而是“有没有被处理”。autoprefixer 从不主动找你，它只等构建工具把 CSS 文件推到它面前。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
