CSS工具与框架全景导图_100个提升开发效率的选择参考

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。动手前，先确认你真正想解决的是哪一层的问题。