Tailwind CSS卡片修改height类值时容器塌陷问题咨询

• 你用的Tailwind CSS v2默认配置里，根本没有h-50、w-75这类类名。Tailwind默认的尺寸刻度是固定步长的，高度类从h-48（对应12rem）往上依次是h-52、h-56、h-60、h-64，压根没有50这个档位，你写了不存在的类名，Tailwind不会生成对应的CSS，等于没给容器设高度。
• 容器里放图片的子元素设了absolute绝对定位，完全脱离普通文档流，根本撑不起父容器的高度。一旦父容器的高度类失效、没有明确高度值，本身又没有普通流里的内容撑高度，直接就会塌成0高度。
• 之前用h-60能正常显示，是因为h-60是Tailwind内置的有效类，会给容器加上height: 15rem的明确样式；你代码里写的w-75也是无效类，现在宽度看着正常只是因为块级元素默认会撑满父级宽度，和这个类半毛钱关系没有。

• 优先用Tailwind内置的有效尺寸类：如果不需要特殊尺寸，直接选默认刻度里有的高度类就行，比如h-48、h-52、h-56、h-64这些，别写不在默认配置里的数值类。
• 要非默认尺寸就用任意值语法：如果需要的尺寸不在默认刻度里，直接用方括号把值写在类名里，不用改配置，比如要200px高就写h-[200px]，要75%宽就写w-[75%]，Tailwind会自动生成对应样式。
• 高频用的自定义尺寸可以改配置：如果某几个自定义尺寸要反复用，直接在tailwind.config.js的theme.extend.height/width字段里加上对应值，之后就能像内置类一样直接用。

JS 逻辑 #

var button = document.querySelector('button');
button.addEventListener('click', function() {
  var h = document.querySelector('.relative');
  // 注意：h-50是无效类，切换后容器高度会失效
  h.classList.toggle('h-50');
  h.classList.toggle('h-60');
});

演示用CSS #

button {
  border: 1px solid black;
}

HTML 结构 #

<!-- 引入Tailwind CSS -->
<link rel="stylesheet">
<!-- 切换高度按钮 -->
<button>Toggle Height</button>

<!-- 卡片结构 -->
<div class="mx-auto px-4">
  <div class="relative w-75 h-60 bg-neutral-500 rounded-2xl truncate border-solid border-indigo-400 border-2">
    <div class="absolute w-20 top-0 left-0 group-hover:inset-y-4">
      <img alt="nike-air-shoe" />
    </div>
  </div>
</div>

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