PostCSS中postcss-preset-env不处理前缀，autoprefixer必须显式启用且browserslist需对齐；Tailwind的content须包含组件文件扩展名；cssnano启用svgo可能误删SVG的id或style，应禁用或精简配置。
没有哪个 CSS 工具或框架能通吃所有项目；选错的代价不是写多几行代码，而是团队协作卡点、构建变慢、升级踩坑、甚至样式失控。
PostCSS 插件链里 postcss-preset-env 和 autoprefixer 到底谁该管兼容性
很多人以为开了 postcss-preset-env 就不用配 autoprefixer，结果部署后 flex 布局在 iOS 12 下直接失效。其实 postcss-preset-env 默认只处理语法降级（比如把 color-mix() 编译成色值），而前缀补全仍需 autoprefixer 独立运行。
-
autoprefixer必须显式启用，且browserslist配置要和它对齐——postcss-preset-env的stage参数不影响前缀生成 - 若同时用
postcss-preset-env和autoprefixer，别把autoprefixer放在 preset 后面，否则可能被 preset 的内置 autoprefixer 覆盖导致配置失效 - 检查实际输出：跑一次
npx postcss input.css -o output.css，看输出里有没有-webkit-flex这类前缀，比查文档更可靠
Tailwind CSS 的 content 配置漏写 .astro 或 .svelte 文件会导致 class 不生效
Tailwind 不扫描源码，只按 content 数组里写的路径做字符串匹配。Astro、Svelte、Qwik 这些编译型框架里，class 名常出现在组件标签属性中（如 <div class="text-sm">），但默认配置往往只列了 <code>./src/**/*.js，根本扫不到模板内容。
- 必须把组件文件扩展名加进去：
./src/**/*.{html,js,ts,jsx,tsx,svelte,astro,mdx} - 如果用了 Vite 插件（如
vite-plugin-svelte），确保 Tailwind 插件在它之后加载，否则 Svelte 编译前的原始字符串还没生成，Tailwind 扫不到 - 开发时 class 突然“消失”，先运行
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch看是否生成了对应规则，而不是直接怀疑 purge 配置
用 cssnano 压缩时开启 svgo 可能删掉 SVG 中关键的 id 或 style
默认 cssnano 会启用 svgo 处理内联 SVG，但它激进清理时会干掉 <symbol id="icon-x"></symbol> 中的 id，导致 <use href="#icon-x"></use> 失效；也会合并或删除 style 属性，让动态改色逻辑崩掉。
立即学习“前端免费学习笔记（深入）”；
- 禁用 SVGO 或精简配置：
{ svgo: { plugins: [{ removeViewBox: false }, { cleanupIDs: false }] } } - 如果项目里大量用
<use></use>引用图标，建议把 SVG 提取为独立文件，用<img alt="CSS工具与框架全景导图_100个提升开发效率的选择参考" >或 HTTP 请求加载，避开 cssnano 的 inline 处理路径 - 压缩后务必检查 SVG 渲染和交互——特别是带 hover 变色、JS 控制 fill 的场景，光看文件大小没用
工具链越长，中间某个环节的隐式行为就越容易掩盖真实问题。比如你以为是 Tailwind 没生效，其实是 PostCSS 某个插件吞掉了你的 @layer 声明；又或者你怪构建慢，结果是 cssnano 在反复解析同一段内联 SVG。动手前，先确认你真正想解决的是哪一层的问题。
