不能直接在框架 CSS 后用 !important 覆盖样式，因其破坏可维护性、引发调试与协作问题，并绕过框架优先级设计；应通过框架扩展机制（如 Tailwind 的 theme.extend、Bootstrap 的 SASS 变量重载、Bulma 的 variables.sass）安全定制。
为什么不能直接在框架 CSS 后面用 !important 覆盖样式
因为这会破坏 CSS 的可维护性，导致后续调试困难、团队协作混乱，且框架升级后容易出现意料外的样式冲突。Tailwind、Bootstrap 或 Bulma 等主流框架都依赖特定的优先级结构和作用域机制，!important 会绕过这些设计，让样式层变成“谁写得晚谁赢”的不可控状态。
真正可行的方式是利用框架自身提供的扩展机制：
- Tailwind：通过
tailwind.config.js的theme.extend或plugins注入自定义类 - Bootstrap：重载 SASS 变量（如
$primary）、在@import顺序中靠前定义变量，再引入 Bootstrap 源码 - Bulma：用
@import加载自定义variables.sass，再导入bulma.sass
如何安全地为 Tailwind 添加非标准间距或颜色
Tailwind 默认的 spacing 和 colors 是有限的，硬编码像素值（如 mt-[17px]）虽能临时解决，但无法复用、不参与响应式断点、也不被 PurgeCSS 识别——上线后可能被误删。
正确做法是在配置中显式声明：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
theme: {
extend: {
spacing: {
'17': '17px',
'128': '32rem'
},
colors: {
'brand-blue': '#2563eb',
'dark-800': '#1e293b'
}
}
}
}
之后就能正常使用 mt-17 或 bg-brand-blue，且支持所有变体（md:mt-17、hover:bg-brand-blue）。
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
当 Bootstrap 组件需要局部视觉定制时，该改 HTML 还是改 SCSS
优先修改 SCSS，而不是给元素加一堆内联类或覆盖类。例如想让所有 .btn-primary 在卡片内背景更暗，不要写：
<button class="btn btn-primary bg-dark">...
而应在项目 SCSS 中：
.card .btn-primary {
background-color: darken($primary, 15%);
border-color: darken($primary, 20%);
}
这样既保持语义清晰，又避免污染 HTML 结构；同时复用框架变量（$primary），确保主题一致性。若需全局调整，直接修改 _variables.scss 中对应变量即可。
为什么 PurgeCSS 会删掉你写的自定义类
因为 PurgeCSS 默认只保留 HTML、JS、Vue、React 文件中「显式出现」的类名。如果你在 tailwind.config.js 里新增了 bg-brand-teal，但没在任何模板中写过这个字符串，它就会被清除。
解决方法有三个：
- 在
content配置中加入自定义类所在文件路径（如./src/styles/custom-classes.js） - 用
safelist显式保留正则匹配项：/^bg-brand-/ - 把自定义类写进一个不会被编译删除的 HTML 注释里（仅限开发阶段应急）
最稳妥的是第一种——把自定义类的定义和使用逻辑收拢到一个可被扫描的 JS/TS 模块中，由工具链统一管理。
