本文旨在帮助初学者理解 Tailwind CSS 中高度属性的行为，并解决在使用 Tailwind 创建卡片时遇到的容器高度塌陷问题。文章将解释 Tailwind 预定义高度类的机制，并提供使用自定义高度的解决方案，确保卡片布局的稳定性和可控性。
理解 Tailwind CSS 的高度类
Tailwind CSS 提供了预定义的高度类，例如 h-4, h-8, h-12 等，它们对应着 theme.spacing 配置中的值。这些类简化了高度的设置，并保持设计的一致性。然而，需要注意的是，Tailwind 并没有提供所有可能的像素高度值，而是在一个范围内提供了一些常用的数值。
当您尝试使用一个不在 Tailwind 预定义高度范围内的值时，例如 h-50（假设 h-50 不在默认配置中），Tailwind 可能会将其解析为 h-0，导致元素高度塌陷。
问题分析
在提供的示例代码中，卡片容器的初始高度被设置为 h-60。当点击按钮时，JavaScript 代码会切换 h-60 和 h-50 类。如果 h-50 没有在 Tailwind 的配置中定义，那么元素的高度就会变为 0，导致容器塌陷。
立即学习“前端免费学习笔记（深入）”；
解决方案：使用自定义高度
为了解决这个问题，您可以使用 Tailwind 的 Arbitrary values 特性来设置自定义高度。Arbitrary values 允许您直接在类名中指定任何 CSS 属性值。
以下是使用自定义高度的示例：
<div class="relative w-75 h-[50px] 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 src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5782.png" alt="nike-air-shoe" />
</div>
</div>在这个例子中，h-[50px] 直接将容器的高度设置为 50 像素。您可以根据需要修改像素值，也可以使用其他单位，例如 rem 或 em。
示例代码：
<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<!-- Button added by Editor for demonstration purpose -->
<button id="toggleButton">Toggle Height</button>
<!-- Body -->
<div class="mx-auto px-4">
<div class="relative w-75 h-[60px] bg-neutral-500 rounded-2xl truncate border-solid border-indigo-400 border-2" id="cardContainer">
<div class="absolute w-20 top-0 left-0 group-hover:inset-y-4">
<img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5782.png" alt="nike-air-shoe" />
</div>
</div>
</div>
<script>
var button = document.getElementById('toggleButton');
var card = document.getElementById('cardContainer');
button.addEventListener('click', function() {
if (card.classList.contains('h-[60px]')) {
card.classList.remove('h-[60px]');
card.classList.add('h-[50px]');
} else {
card.classList.remove('h-[50px]');
card.classList.add('h-[60px]');
}
});
</script>CSS (可选):
button {
border: 1px solid black;
margin-top: 10px;
}代码解释:
- HTML 结构: 与之前的代码相似，但 h-60 被替换为 h-[60px]。
-
JavaScript:
- 使用 getElementById 获取按钮和卡片容器的引用。
- 添加点击事件监听器到按钮。
- 在点击事件处理程序中，检查容器是否具有 h-[60px] 类。
- 如果存在，则删除 h-[60px] 并添加 h-[50px]。
- 否则，删除 h-[50px] 并添加 h-[60px]。
扩展 Tailwind 配置 (可选)
如果您需要在项目中频繁使用某个特定的高度值，可以将其添加到 Tailwind 的配置文件 (tailwind.config.js) 中。
module.exports = {
theme: {
extend: {
height: {
'50': '50px', // 添加自定义高度值
}
}
},
plugins: [],
}添加配置后，您就可以像使用其他 Tailwind 预定义类一样使用 h-50 了。 注意: 在修改了 tailwind.config.js 文件后，需要重新构建您的 CSS 文件，才能使更改生效。通常可以通过运行 npm run dev 或 npm run build 实现。
注意事项
- 在使用 Arbitrary values 时，请确保值的单位正确。例如，使用 px, rem, em, vh, vw 等。
- 过度使用 Arbitrary values 可能会导致代码的可读性和可维护性降低。尽量使用 Tailwind 预定义的类，并在必要时扩展配置。
- 检查 Tailwind CSS 的版本。Arbitrary values 的语法可能因版本而异。
总结
通过理解 Tailwind CSS 的高度类机制，并使用自定义高度或扩展配置，您可以轻松解决卡片容器高度塌陷的问题。始终关注 Tailwind CSS 的文档，并根据项目的需求选择最合适的解决方案。记住，保持代码的清晰性和可维护性至关重要。
