Bootstrap 5工具类必须通过修改Sass变量$utilities并重新编译生成，不能直接在HTML中写未定义的原子类；因其由Sass map动态驱动，漏配property、values等键或未调用generate-utility函数将导致CSS完全不输出。
Bootstrap 5不支持直接在HTML中写原子类，得靠Sass重编译
Bootstrap 5本身不提供类似Tailwind的原子CSS（如 mt-4、bg-blue-500）生成机制，它的实用工具类（utility classes）是预编译好的。想新增或扩展现有功能类（比如加一个 shadow-xl 或 border-dashed），不能靠HTML里随便写个class就生效——必须修改Sass源码并重新构建CSS。
常见错误现象：在HTML里写了 bg-gradient-to-r 或 flex-1，但样式完全没作用，浏览器里查不到对应CSS规则。这是因为这些类根本不在Bootstrap 5默认输出范围内。
- 必须基于官方Sass源码（
scss/目录）扩展，不能只改CSS文件 - 所有新增工具类需定义在
_utilities.scss或自定义的_custom-utilities.scss中，并通过map-merge注入$utilities - 使用
bootstrap/scss/bootstrap.scss入口重新编译，而非仅导入CSS - 若用CDN或预编译CSS包（如
bootstrap.min.css），任何原子类扩展都无效
如何安全地添加新间距工具类（例如 mt-7）
Bootstrap 5默认只到 mt-5（对应3rem），想加 mt-6/mt-7，不能硬编码CSS，得延续其Sass生成逻辑。
典型场景：项目需要更精细的垂直留白控制，又不想破坏原有响应式断点体系（如 mt-md-7 也要存在）。
- 在自定义Sass文件中，先扩展
$spacersmap：$spacers: map-merge($spacers, (6: 4rem, 7: 5rem));
- 确保已导入
bootstrap/scss/functions和bootstrap/scss/variables，否则map-merge报错 - 调用
generate-utility时，传入更新后的$spacers，并显式覆盖margin-top的映射键名（Bootstrap 5默认不为7生成） - 注意响应式变体：若要支持
mt-lg-7，需确认$theme-breakpoints已加载，且generate-utility被包裹在响应式循环中
为什么直接写 !important 扩展类是危险的
有人会绕过Sass，在CSS末尾加：
.bg-custom { background-color: #2d3748 !important; }
，这看似快，但实际埋下维护雷。
性能与兼容性影响明显：这类声明会破坏Bootstrap的层叠顺序，导致 bg-dark + bg-custom 同时出现时行为不可预测；更严重的是，它让后续开发者无法用标准工具类覆盖该样式（比如 bg-white 失效）。
-
!important类无法参与Bootstrap的响应式前缀生成（没有bg-custom-md） - 无法被
rtl自动翻转（如float-left→float-right） - Webpack/Vite等打包器无法tree-shake掉未使用的
!important类，增大CSS体积 - 调试时Chrome DevTools显示“已取消”却仍生效，容易误判优先级问题
真正可复用的原子类扩展必须走Sass变量+函数流程
最容易被忽略的一点：Bootstrap 5的工具类不是静态列表，而是由 generate-utility 函数动态生成的。跳过这一步，等于放弃响应式、RTL、深色模式（prefers-color-scheme）等内置能力。
正确路径只有这一条：定义变量 → 注入map → 调用生成函数 → 重编译。中间任何环节漏掉（比如忘了 @include generate-utility），新类就不会出现在最终CSS里。
复杂点在于，不同工具类依赖不同Sass模块：间距类依赖 $spacers 和 $theme-breakpoints，阴影类依赖 $shadows，边框类依赖 $border-widths。每个扩展都得对齐原始源码的变量命名和结构，否则生成的CSS可能缺失断点或单位换算异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
