Tailwind中负向translate（平移）失效问题求助

问题出在你使用的-translate-x-50不是Tailwind的有效工具类。Tailwind对百分比值的translate位移类采用分数命名规则，比如用1/2代表50%，而非直接写数字50。

修复方案 #

将按钮类中的-translate-x-50替换为-translate-x-1/2即可，修正后的代码如下：

<div class="relative h-12 w-full bg-yellow-500">
  <button class="-translate-x-1/2 absolute bottom-1 left-1/2 transform bg-red-500">hi there</button>
</div>

补充说明 #

Tailwind的transform位移工具类中，百分比位移的命名逻辑是用分数表示元素自身尺寸的比例：

• translate-x-1/2 对应 transform: translateX(50%)
• -translate-x-1/2 对应 transform: translateX(-50%)
• 同理还有1/4（25%）、3/4（75%）等分数选项

你之前的-translate-x-50写法不符合Tailwind的命名规范，框架无法识别该类，因此不会生成对应的CSS平移样式，导致效果失效。

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