Autoprefixer 不是装完即用的开关，必须被 PostCSS 正确加载且 CSS 文件实际流经其处理链；常见失效原因包括 postcss.config.js 未被构建工具读取、browserslist 配置错误、CSS 语法无前缀需求或与 Tailwind/CSS-in-JS 混用导致绕过处理。
autoprefixer不是装完就能用的开关，它必须被 PostCSS 正确加载，且你的 CSS 文件必须实际经过这道处理流程——绝大多数“没加前缀”的问题，根源都在这里断了。
postcss.config.js 是否真被构建工具读取？
很多项目有 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
写了新属性却没前缀？可能是 caniuse 数据里压根不需要
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替代 - 写了
display: flex在 iOS 8.4 上不生效 → Safari 8 需要display: -webkit-box和display: -webkit-flex，但这些前缀仅在browserslist包含旧版本时才生成
和 Tailwind / CSS-in-JS 混用时，前缀经常被绕过
Tailwind 默认禁用 autoprefixer，因为它自己的构建流程已内建前缀逻辑；CSS-in-JS 库如 Emotion、Styled Components 默认不走 PostCSS pipeline，除非你显式配置 babel-plugin-styled-components 或 @emotion/babel-plugin 并启用 cssProp 支持。
实操建议：
- 若同时用 Tailwind 和手写 CSS，确保手写部分走 PostCSS（比如放在
src/index.css），而 Tailwind 的@layer或@apply不依赖autoprefixer - Emotion 用户需在
.babelrc中启用@emotion/babel-plugin，并设置sourceMap: true才能让 PostCSS 插件介入 - 不要在
styled.div字符串模板里写需要前缀的复杂属性——这类代码通常跳过 PostCSS，应改用标准 CSS 文件 +className
真正卡住人的地方，往往不是插件没装，而是构建链路里某一处没对齐：PostCSS 没触发、browserslist 没生效、或者你写的属性本就不在前缀覆盖范围内。验证每一步，比反复重装插件更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
