升级框架后样式异常应先查官方Changelog中的breaking Changes，再用DevTools定位失效类名，谨慎替换并核对前缀、作用域及默认值变更。
查官方 Changelog 时重点看 Breaking Changes
框架升级后样式异常，八成是新版本做了不兼容改动。别急着改 css，先去 gitHub 或官网翻 CHANGELOG.md，用浏览器搜索 Breaking Changes 或 Deprecated。很多框架（比如 bootstrap 5 升级到 6、Tailwind v3 到 v4）会在这里明确列出被移除的类名、默认值变更、或组件结构调整。例如 btn-primary 可能被重命名为 btn--primary，text-center 在某些版本里被合并进 text-align-center —— 这些不会报错，但样式直接失效。
用 DevTools 快速定位「消失的类」
打开浏览器开发者工具，选中异常元素，在 Styles 面板里看哪些类名没生效：如果某个类名显示为灰色、带删除线，或干脆没出现在 CSS 规则列表里，说明它已被移除或重命名。此时右键该类名 → “Break on Attribute modification” 不实用，更有效的是：
- 在 Elements 面板中手动删掉疑似旧类名，观察样式是否恢复
- 用 Ctrl+F 搜索旧类名（如
col-md-6），确认是否还存在于框架 CSS 文件中 - 检查
node_modules/your-css-framework/dist/下的最新 CSS 文件源码，搜关键词验证是否存在
替换类名不能靠全文搜索硬替
盲目用编辑器全局替换 pull-left → Float-start 很危险：可能误改 js 字符串、注释、或自定义类。正确做法是：
- 只在 html 模板和 JSX/TSX 中批量替换，排除
.js、.ts、.json等非模板文件 - 优先用框架提供的迁移脚本（如 Tailwind 的
@tailwindcss/upgrade、Bootstrap 的bootstrap-migrator） - 对动态拼接类名的场景（如
className={`btn ${type === 'save' ? 'btn-primary' : 'btn-secondary'}`}），必须人工逐处核对，脚本无法安全处理
这类逻辑一旦漏掉，上线后按钮就全变默认色。
注意 utility 类前缀和作用域变化
新版框架常引入前缀（如 tw-）、启用 JIT 模式、或限制作用域（如仅扫描 src/**/*.{html,tsx}）。如果升级后部分 utility 类突然不生效，检查：
- 配置文件中是否新增了
prefix选项（如 Tailwind 的prefix: 'tw-'），导致tw-text-red-500才有效 -
content路径是否遗漏了新组件目录，导致 JIT 没生成对应 CSS - 是否启用了
important: true或!important策略，改变了原有优先级
这些改动不会报错，但会让局部样式“静默失效”，最难排查。
立即学习“前端免费学习笔记（深入）”；
实际升级中最容易被忽略的，是那些没写在文档显眼位置的默认值变更——比如间距缩放比例从 theme.spacing.4 改为 theme.spacing.5，或者 box-sizing 默认值回退到 content-box。这类细节得对照新旧版默认 theme 文件逐行比对。