Autoprefixer不生效主因是PostCSS未真正运行，需确认配置文件位置、依赖安装及CSS是否经PostCSS处理；目标浏览器范围须精准配置browserslist；它只加前缀不转译语法；与Tailwind或CSS-in-JS混用时易被绕过。
Autoprefixer插件不生效？先确认PostCSS是否真在运行
很多情况下你以为配置好了，其实PostCSS根本没介入构建流程。比如用Vite或Webpack时，postcss.config.js放错位置、没装postcss依赖、或者CSS文件压根没走PostCSS处理（比如直接@import了未编译的.css文件）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查构建工具文档，确认它是否默认启用PostCSS（Vite 5+ 默认启用，Create React App 5+ 需手动配
postcss.config.js） - 在
postcss.config.js里加个故意写错的插件（如require('xxx')），看构建是否报错——不报错说明配置文件根本没被读取 - 确保处理的是
.pcss、.postcss或.css（取决于你构建工具的规则），且不是已压缩/已发布的CSS
target浏览器范围写不对，前缀就补得乱七八糟
autoprefixer不是靠猜，是严格按browserslist配置决定要不要加前缀。写成"> 1%"可能补一堆IE11的-ms-，而项目实际根本不支持IE；写成"last 2 versions"又可能漏掉某些安卓WebView的旧内核。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
browserslist字段（在package.json里）而非autoprefixer的overrideBrowserslist参数，避免多处维护 - 线上项目推荐显式声明，例如：
"supports es6 modules"+"iOS >= 13"，比模糊的last 2 versions更可控 - 运行
npx browserslist验证当前配置匹配哪些真实浏览器版本，别只信记忆
CSS语法太新，Autoprefixer根本不会处理
Autoprefixer只补前缀，不转译语法。比如你写了display: grid，它会补-ms-grid（如果目标含IE）；但如果你写了gap: 1rem，它不会帮你降级成margin模拟——那属于postcss-preset-env的事。
常见错误现象：
- 用了
aspect-ratio却没看到任何前缀 → 正常，这属性目前无主流前缀需求 - 写了
place-items: center，但Safari 14.1下不生效 → 不是前缀问题，是该属性在Safari中需align-items+justify-items拆解 - 启用了
grid-template-areas，IE11完全空白 → Autoprefixer确实加了-ms-grid，但IE的Grid实现和现代标准差异极大，不能指望自动兼容
和CSS-in-JS或Tailwind混用时，前缀容易被绕过
Tailwind默认已内置Autoprefixer逻辑，再额外配一遍可能冲突；Emotion、Styled Components等CSS-in-JS库若用css函数动态生成样式，PostCSS通常不处理运行时生成的内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Tailwind用户：删掉
postcss.config.js里的autoprefixer，改用tailwind.config.js的content+purge（v3+为content）驱动浏览器检测 - 用
styled-components时，确保babel-plugin-styled-components没开启ssr: false导致服务端样式丢失前缀 - 所有动态拼接的CSS字符串（如
const style = `display: ${flex ? 'flex' : 'block'}`）都不会进PostCSS流水线——这类必须靠JS运行时判断
最麻烦的其实是“部分生效”：比如开发环境有前缀，打包后没了——八成是生产构建跳过了PostCSS，或者CSS提取插件（如mini-css-extract-plugin）没传正确的postcssOptions。这种问题没法靠重装依赖解决，得一层层查loader链路。
