TailwindCSS中'from-muted/10 from-10% to-muted/30 to-50%'含义咨询

先修正代码里的小问题：原代码多了一个闭合</div>，正确结构如下：

return (
  <div className="fixed inset-x-0 bottom-0 bg-red-100 bg-gradient-to-b from-muted/10 from-10% to-muted/30 to-50%">
    <ButtonScrollToBottom />
  </div>
)

下面逐个拆解每个class的作用：

• fixed：把元素设为固定定位，相对于浏览器视口固定，不会随页面滚动移动。
• inset-x-0：等同于left: 0; right: 0;，让元素左右两边完全贴合视口边缘。
• bottom-0：让元素底部紧贴视口底部，配合上面两个类，这个div会固定在页面最底部，宽度铺满整个视口。
• bg-red-100：设置元素的基础背景色为Tailwind预设的浅红色（red-100），不过因为后面叠加了渐变背景，这个底色大概率会被渐变覆盖，除非渐变有透明区域。
• bg-gradient-to-b：创建一个从上到下的线性渐变背景。
• from-muted/10：from-是渐变起始色的前缀，muted是你项目里在tailwind.config.js中自定义的颜色名，/10是给这个颜色加10%的透明度——也就是渐变的起始色是10%透明度的muted色。
• from-10%：设置渐变的起始位置在元素垂直方向的10%高度处（默认是从顶部0%位置开始，这里改成了10%的位置）。
• to-muted/30：to-是渐变结束色的前缀，同样muted是自定义颜色，/30是30%透明度——也就是渐变的结束色是30%透明度的muted色。
• to-50%：设置渐变的结束位置在元素垂直方向的50%高度处（默认是到底部100%位置结束，这里改成了50%的位置）。

整体效果：这个div固定在页面底部、宽度铺满视口，背景是一个从上到下的渐变——从元素10%高度的位置开始，由10%透明度的muted色过渡到50%高度位置的30%透明度的muted色，渐变结束后，剩下的区域会保持结束色（或显示基础的bg-red-100，取决于渐变覆盖范围）。

内容的提问来源于stack exchange，提问作者will