Tailwind 如何让页面底部粘性元素按内容自适应宽度？

当前写的蓝色按钮容器是默认块级元素，会自动撑满父容器的全部横向宽度，就算加了sticky定位属性，也不会自动收缩宽度匹配“UP”文字尺寸，才会出现按钮拉通整个页面宽度的问题。

只需要针对按钮容器做两点修改，就能实现目标效果：

• 给按钮容器加上w-fit类：取消块级元素默认撑满父宽的特性，让元素宽度完全跟随内容尺寸+已设置的内边距自适应，不需要手动写固定宽度。如果使用的Tailwind版本低于3.0没有内置w-fit类，可以用inline-block实现同样的效果，仅需注意处理inline-block带来的基线对齐间隙。
• 配合添加ml-auto类：把文档流中默认左对齐的按钮推到父容器最右侧，搭配已有的right-5定位偏移，就能让按钮精准贴在右下角位置。

注意：sticky定位需要足够的滚动高度才能触发效果，建议给外层的黄色容器添加min-h-[200vh]类，给页面留出足够的垂直滚动空间，避免按钮直接停在文档最底部不生效。

<div class="bg-yellow-300 min-h-[200vh]">
  <div class="p-16 m-5 text-xl bg-gray-500">
    考拉是十分糟糕的动物。它们是所有哺乳动物中脑体比最小的物种之一，且大脑表面光滑——大脑的褶皱本是用于提升神经元的表面积。
    总而言之：考拉智力低下、易渗漏、满身性病的性侵犯者。不过嘛，它们外形倒是可爱，前提是你忽略它们那可怖的蛇形眼睛和吓人的爪子。
  </div>

  <div class="bg-blue-500 sticky text-xl bottom-5 right-5 w-fit ml-auto rounded-lg p-5">
    <a href="#top">UP</a>
  </div>
</div>

调整后按钮宽度会刚好适配“UP”文字的渲染宽度，加上四周p-5的内边距，完全实现你期望的不拉伸、自适应内容的效果，滚动页面时按钮会始终固定在距离视口右下角1.25rem的位置。

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