Autoprefixer不自动生效，根本原因是PostCSS未运行、browserslist配置错误、CSS写法超出支持范围或与Tailwind/CSS-in-JS混用导致流程绕过；它只补前缀，不转译语法。
Autoprefixer不是“自动加前缀”的万能开关，它只在明确匹配目标浏览器能力时才补，且完全不处理语法降级。很多项目配了却没效果，根本原因不是插件没装，而是 PostCSS 根本没跑起来。
PostCSS 没运行，autoprefixer 就是摆设
常见错误现象：display: flex 写了但编译后没任何 -webkit- 或 -ms- 前缀；检查生成的 CSS 文件，发现连注释都没变过。
实操建议：
- 在
postcss.config.js里故意 require 一个不存在的插件（如require('xxx')），执行构建——如果不报错，说明该配置文件压根没被读取 - Vite 5+ 默认启用 PostCSS，但只处理
.css、.pcss、.postcss后缀；若你@import './base.css'进的是已发布的 CSS（非源码），它不会进 PostCSS 流程 - Webpack 中
postcss-loader必须出现在css-loader之后、style-loader之前；顺序错（比如写成style-loader → postcss-loader → css-loader）会导致零效果
browserslist 配置错，前缀就补得毫无意义
常见错误现象：写了 aspect-ratio: 1/1 却看到一堆 -ms-aspect-ratio；或 gap: 1rem 在 Safari 14.1 下失效，但 Autoprefixer 没加任何前缀。
实操建议：
- 删掉
autoprefixer({ browsers: [...] })这种写法——它已被废弃，会触发警告并可能被忽略 - 统一用
browserslist字段：在package.json里加"browserslist": ["iOS >= 13", "Chrome >= 87", "not dead"]，避免多处维护 - 运行
npx browserslist看实际命中哪些浏览器版本；别信“last 2 versions”，它可能把 Android 4.4 WebView 也拉进来，而你项目早已不支持
Autoprefixer 只补前缀，不解决兼容性
常见错误现象：IE11 页面空白；Safari 14.1 中 place-items: center 不生效；grid-template-areas 加了 -ms-grid 但布局完全错乱。
说明：
-
Autoprefixer不转译语法——gap不会变成margin计算，aspect-ratio目前无主流前缀需求，它就什么也不加 - IE 的 Grid 实现和现代标准差异极大，
-ms-grid只是“有前缀”，不代表“能用”；这类场景需要手动 fallback 或用postcss-preset-env -
place-items在 Safari ≤14.1 需拆成align-items: center; justify-items: center，Autoprefixer 不做这种语义转换
和 Tailwind / CSS-in-JS 混用时，Autoprefixer 很容易被绕过
常见错误现象：Tailwind 编译后没有 -webkit- 前缀；Emotion 的 css 函数生成的样式在旧版 Chrome 里 flex 失效。
说明：
- Tailwind v3+ 内置 Autoprefixer 逻辑，额外配
postcss.config.js可能冲突；应优先查tailwind.config.js的content和prefix字段 - CSS-in-JS 库（如 Styled Components、Emotion）中动态生成的样式，运行时注入 DOM，PostCSS 完全不参与处理——这类代码必须靠库自身支持或手动加前缀
- 若用
@apply引入 Tailwind 工具类到普通 CSS 文件，确保该 CSS 文件路径被 Tailwind 的content扫描到，否则前缀逻辑不触发
真正卡住人的，从来不是“怎么装插件”，而是搞不清构建流程里哪一环断了、browserslist 到底匹配了谁、以及哪些 CSS 特性根本不在 Autoprefixer 能力范围内。补前缀只是兼容性链条中最前端的一小步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
