Chrome Coverage可检测未用CSS：打开开发者工具→切换Coverage标签→点击刷新重载页面，红色标出未应用样式；需逐页测试动态路由，并结合PurgeCSS或Tailwind purge精准清理。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
确认哪些CSS样式真正未被使用
先别急着删，打开 Chrome 浏览器 → 按 F12 打开开发者工具 → 切换到「Coverage」标签页 → 点击右上角的刷新按钮重新加载页面。Coverage 会立即扫描当前页面所有加载的 CSS 文件，并用红色高亮标出未执行的代码行。注意：这个结果只反映当前页面的使用情况，【若项目是多页面或含动态路由，必须逐个访问关键路径后再汇总判断】。
覆盖检测完后，点击某 CSS 文件名可跳转到 Sources 面板，直接看到每行是否被命中。这时候你会发现，很多类名在 HTML 或 JS 中根本没出现过，比如 .legacy-modal、.old-button--v1 —— 这些就是高危候选对象。
用 PurgeCSS 批量清除无用规则
第一步：安装 PurgeCSS CLI 工具，运行 npm install -g purgecss。
第二步：进入项目根目录，执行以下命令（以标准 React 项目为例）：
立即学习“前端免费学习笔记（深入）”；
purgecss --css ./src/index.css --content "./src/**/*.{js,jsx,ts,tsx,html}" --output ./dist/css/
这一步会读取 index.css 中所有选择器，再扫描 src 下全部 JS/JSX/TS/TSX/HTML 文件中出现的类名字符串，仅保留交集部分。注意：【务必确保 content 路径包含所有可能拼接类名的文件，否则像 class={`btn ${type}`} 这种会被误删】。
第三步：生成的 ./dist/css/index.css 就是精简后的样式表，替换原文件前建议先 diff 对比，重点检查动画类（@keyframes）、伪类（:hover）、媒体查询块是否完整保留。
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
处理第三方库和动态类名
方法一：白名单强制保留关键类名
在 purgecss 命令后追加 --whitelist "fade", "show", "modal-backdrop"，把 Bootstrap 常用类名列进去。如果数量多，改用 --whitelist-file ./purgecss-whitelist.txt，每行写一个类名。
方法二：正则匹配第三方库前缀
比如你用了 Ant Design，其类名统一以 ant- 开头，添加参数 --whitelist-patterns "/^ant-/" 即可自动保留所有 ant-* 类，不用手动穷举。
方法三：绕过 PurgeCSS，改用 Tailwind 内置 purge（仅限 Tailwind 项目）
编辑 tailwind.config.js，在 module.exports 中启用 purge 配置：
purge: { enabled: true, content: ['./src/**/*.{js,jsx,ts,tsx}'] }
保存后重新构建，Tailwind 会在生成 CSS 时自动剔除未使用的工具类，比外挂 PurgeCSS 更安全，【且能正确识别 @apply 和动态模板字符串中的类名】。
