如何用Tailwind CSS固定Div在屏幕右下角并设置边距

问题根源 #

你的代码使用了Tailwind CSS v1.0版本，但bottom-[10px]、right-[10px]这类任意值定位语法是Tailwind v3才引入的特性，v1无法识别这些类，导致fixed元素的定位属性失效，最终回到默认的顶部位置。

解决方案 #

方案1：升级Tailwind到最新版本（推荐）

将页面中的Tailwind CDN链接替换为最新版，任意值语法即可正常生效：

<link href="https://cdn.tailwindcss.com" rel="stylesheet">

替换后，原代码中的fixed bottom-[10px] right-[10px]会正确将div固定在屏幕右下角，保持右侧和底部各10px的边距，且滚动时位置不变。

方案2：在Tailwind v1中实现精确10px边距

如果不想升级版本，可通过内联样式直接设置定位值，绕过Tailwind v1的语法限制：

<div class="fixed p-2 bg-green-500" style="bottom: 10px; right: 10px;">
    <p>Fixed positioned div</p>
</div>

这种方式无需依赖Tailwind的类，直接通过CSS原生属性实现需求。

补充说明 #

你最初使用absolute定位时，absolute是相对于最近的非static父元素（若所有父元素都是static则相对于视口），此时添加mb-10这类margin类不会改变其定位参考，因此无法实现预期的边距效果；而fixed定位始终相对于视口，是实现“滚动时固定位置”需求的正确选择。

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