如何阻止Tailwind项目中Div随内容变化而收缩？

问题核心是你的主div默认会根据内部内容的实际宽度自适应，当悬停切换的文本比初始内容短，容器就会跟着收缩。w-full仅能让元素占满父容器宽度，但如果父容器本身没有固定宽度，这个类不会起到固定容器尺寸的作用。

给你两个可行的Tailwind方案：

方案1：固定容器最小宽度为初始内容宽度 #

使用Tailwind的min-w-max类，它会让容器的最小宽度等于内部内容的最大宽度，即使后续内容变窄，容器也不会收缩：

<!-- 修改前 -->
<div class="bg-gray-100 p-2">
  <span>初始较长文本</span>
  <button class="ml-2">?</button>
  <span class="hidden hover:block">短文本</span>
</div>

<!-- 修改后 -->
<div class="bg-gray-100 p-2 min-w-max group">
  <span>初始较长文本</span>
  <button class="ml-2">?</button>
  <span class="hidden group-hover:block">短文本</span>
</div>

注意：如果需要通过父元素hover触发文本切换，要给主div加上group类，子元素用group-hover:block替代hover:block。

方案2：用绝对定位避免内容宽度变化 #

把悬停文本绝对定位在初始文本的位置，这样容器的宽度始终由初始内容决定，不会被悬停文本影响：

<div class="bg-gray-100 p-2 relative">
  <span class="inline-block">初始较长文本</span>
  <button class="ml-2">?</button>
  <span class="absolute left-2 top-2 hidden hover:block bg-gray-100">短文本</span>
</div>

这里给悬停文本加上和容器一样的背景色，避免覆盖时出现视觉断层，同时调整left/top值让它和初始文本位置对齐。

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