<p>Bootstrap 5 不支持 Tailwind 风格的断点前缀渐变类（如 md:bg-gradient-to-r），因其 CSS 中未生成对应规则；所有 bg-gradient-* 类均为全局固定 135deg 渐变，需用 @media 覆盖 background-image 实现响应式渐变。</p>
为什么直接加 md:bg-gradient-to-r 完全无效
Bootstrap 5 不识别任何带断点前缀的渐变类名，md:bg-gradient-to-r、lg:bg-gradient-primary 这类写法是 Tailwind 的语法，Bootstrap 的 CSS 文件里压根没生成对应规则。所有内置 bg-gradient-* 类（如 bg-gradient-primary）都是无媒体查询的全局样式，方向固定为 135deg，且无法通过工具类开关断点逻辑。
@media 覆盖 background-image 是唯一可靠路径
渐变本质是 background-image，不是 background-color，所以必须用媒体查询精准覆盖该属性，而不是改 background 简写（会清掉已有颜色或纹理）。
- 小屏基础态必须先写：
.section { background-color: #f8f9fa; } - 断点内只改
background-image：@media (min-width: 768px) { .section { background-image: linear-gradient(90deg, #0d6efd, #20c997); } } - 断点值严格对齐 Bootstrap 5：
768px对应md，不能写767px或770px - 方向优先用角度（如
90deg），比to right在旧版 Safari 中更稳
自定义带断点前缀的渐变类怎么写才不被覆盖
如果多个组件都要“仅 md+ 渐变”，可以定义 bg-md-gradient-to-r 这类类名，但必须解决权重问题——Bootstrap 的 bg-light 等类自带 !important，你的规则不加就赢不了层叠。
- SCSS 中用
@include media-breakpoint-up(md)，避免硬编码像素值 - 类定义必须含
!important：.bg-md-gradient-to-r { background-image: linear-gradient(90deg, #0d6efd, #20c997) !important; } - HTML 中 class 顺序很重要：
class="bg-md-gradient-to-r bg-white"，自定义类在前，保底色在后 - 颜色建议引用 Bootstrap 变量（如
$primary,$success），方便主题同步
容易被忽略的三个实际细节
渐变一加上，很多问题不是“没生效”，而是被其他逻辑掩盖：
- 子元素（如
.card、.container）默认有纯白背景，会完全遮住父容器渐变——得设background-color: rgba(255,255,255,0.9)留透出空间 - 文字对比度常跌破 WCAG 标准，尤其浅渐变配
text-dark；必须同步调文字色：text-white配深渐变，text-dark配浅渐变 - 深色模式下，
prefers-color-scheme: dark需单独重写渐变色，否则用户切主题后仍看到亮色渐变，且 iOS Safari 对根变量更新有延迟，要双保险
