Tailwind CSS中span设置w-auto无法自动适配宽度问题求助

问题出在父span是inline类型元素，即便设置了w-6和h-6，绝对定位的子元素的包含块仍会被限制在父元素的宽度范围内，导致w-auto无法根据内容自动撑开宽度。

修改方案 #

给子span添加min-w-max属性（强制宽度适配内容），同时保留w-auto，再配合left-0让提示框从父元素左侧开始显示，避免文本截断：

<span class="group/item relative ml-2 h-6 w-6 bg-yellow-300">Hover me
  <span class="absolute top-7 left-0 z-10 hidden w-auto min-w-max rounded-md bg-gray-900 px-3 py-1 text-[10px] text-white group-hover/item:block"> Create payment </span>
</span>

效果说明 #

• 当前效果：提示框宽度与父元素一致（w-6），文本被迫换行显示
• 期望效果：提示框宽度自动适配"Create payment"文本长度，一行完整显示

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