安全删减CSS框架应先扫描实际使用的类名，用PurgeCSS或UnoCSS生成未使用列表并白名单动态类；保留框架核心样式如Bootstrap的container、Tailwind的flex/sr-only；通过配置文件而非删源码控制功能开关；删后须验证表单状态、焦点样式及高对比度/打印模式。
删减 CSS 框架前先确认哪些类真正在用
盲目删 normalize.css 或砍掉整个 utilities 目录，大概率导致某处按钮突然塌陷或响应式断点失效。真正安全的删减起点是「项目里实际被 HTML 引用过的类名」。
推荐做法：用 purgecss（配合 Webpack/Vite）或 unocss 的 --dry-run 模式扫描全量构建产物，导出未使用的类列表。注意它默认不识别动态拼接的类名，比如 class="${prefix}-btn" 这种必须手动加白名单。
- Vue/React 中通过
v-bind:class或className={clsx('btn', isPrimary && 'btn-primary')}生成的类，需额外配置正则匹配 - 第三方组件库（如 Ant Design）注入的类名，容易被误删，建议单独保留其 CSS 入口文件不参与 purge
- 开发环境禁用 purge，否则热更新时样式丢失会干扰调试
Bootstrap / Tailwind 等框架的「不可删核心」有哪些
不是所有基础类都可删。比如 container、row、col 在 Bootstrap 中看似普通，但若 HTML 里写了 <div class="container"> 却删了对应规则，布局直接崩溃；Tailwind 的 sr-only、invisible、flex 等原子类也常被 JS 动态控制显隐，删掉后逻辑异常但控制台无报错。
- Bootstrap：保留
reboot.css（含html、body重置）、grid.scss（若用了栅格）、utilities/api.scss（如果启用了 utility API） - Tailwind：至少保留
@layer base（含*, ::before, ::after重置）和@layer components中被引用的自定义组件类 - 删
@layer utilities前确认没有 JS 调用element.classList.add('p-4', 'text-sm')这类硬编码
自定义配置比直接删文件更可控
直接删 node_modules/tailwindcss/base.css 文件？别。改 tailwind.config.js 才是正解——它能精准关闭不需要的模块，且不影响后续升级。
立即学习“前端免费学习笔记（深入）”；
- Tailwind：设
corePlugins: { preflight: false }关停基础重置（但得自己补box-sizing: border-box）；用variants控制伪类支持范围，比如只留['responsive', 'hover']，砍掉focus-within等低频变体 - Bootstrap：通过 SCSS 变量控制，比如设
$enable-gradients: false、$enable-shadows: false，比手动删mixins/_gradients.scss更稳妥 - 删完记得清
node_modules/.cache，否则旧 CSS 可能被缓存复用
删减后必须验证的三个地方
压缩体积数字好看没用，关键看页面是否还「正常工作」。尤其容易漏掉的是：表单控件状态、焦点管理、打印样式、高对比度模式适配。
- 用浏览器 DevTools 的
Rendering → Emulate CSS media → print查看打印样式是否崩（很多框架删了@media print规则就只剩文字） - 按
Tab键遍历所有可聚焦元素，确认:focus样式仍在（尤其当关了focus-ring插件时） - 打开系统级「高对比度模式」（Windows 设置或 macOS 辅助功能），检查按钮边框、图标是否还能识别
删 CSS 不是越少越好，而是让每一行都承担明确职责。最危险的不是删多，是删掉某个没人记得为什么存在的 .visually-hidden 类，结果导致屏幕阅读器用户卡在登录页。
