本文旨在帮助初学者理解 Tailwind CSS 中高度属性的运作机制，并解决在使用 Tailwind 构建卡片时遇到的高度塌陷问题。通过了解 Tailwind 预设的高度值以及自定义高度的方法，开发者可以避免此类问题，更灵活地控制元素的高度。
在使用 Tailwind CSS 构建网页时，开发者可能会遇到一个令人困惑的问题：当尝试设置元素高度时，即使只是稍微调整高度值，元素也可能会完全塌陷。 这个问题通常发生在初学者身上，源于对 Tailwind CSS 高度属性工作方式的不熟悉。
Tailwind CSS 的高度属性
Tailwind CSS 采用了一种基于比例和预设值的实用类（utility-first）方法。这意味着它提供了一系列预定义的类，用于快速设置元素的各种属性，包括高度。
立即学习“前端免费学习笔记（深入）”；
然而，与直接使用 CSS 属性不同，Tailwind CSS 的高度类并不是连续的。 也就是说，它不是为每个可能的像素值都提供一个类。 相反，它提供了一组离散的高度值，例如 h-0、h-1、h-2，等等。这些值通常对应于 Tailwind CSS 配置中定义的比例。
例如，h-48、h-52、h-56 和 h-60 是 Tailwind 中接近 h-50 的一些高度类。 因此，如果尝试使用 h-49 或 h-51，Tailwind CSS 将不会找到匹配的类，元素的高度将默认为 h-0，导致元素塌陷。
解决方案：使用预定义的高度类或自定义高度
要解决这个问题，有两种主要方法：
-
使用最接近的预定义高度类： 检查 Tailwind CSS 文档 或 Tailwind CSS 配置，找到最接近所需高度的预定义类。 例如，如果想要的高度是 49px，则可以使用 h-48 或 h-52，具体取决于哪一个更接近。
-
使用自定义高度： 如果预定义的高度类无法满足需求，可以使用 Tailwind CSS 的方括号表示法来指定自定义高度。 这允许直接设置像素值、rem 值或其他 CSS 单位。
<div class="h-[50px]"> <!-- 内容 --> </div> <div class="h-[50rem]"> <!-- 内容 --> </div>
在上面的例子中，h-[50px] 将元素的高度设置为 50 像素，而 h-[50rem] 将元素的高度设置为 50 rem。 这种方法提供了更大的灵活性，可以精确地控制元素的高度。
示例代码
以下是一个示例，演示了如何使用自定义高度来解决卡片塌陷问题：
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div class="mx-auto px-4"> <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> </div>
在这个例子中，我们将 h-60 替换为 h-[50px]，以确保元素的高度始终为 50 像素，从而避免塌陷问题。
注意事项
- 在使用自定义高度时，请确保使用适当的 CSS 单位（例如 px、rem、em、vw、vh），并根据需要进行调整。
- 考虑使用 Tailwind CSS 的配置选项来扩展或自定义高度比例，以便更轻松地使用常用的高度值。
- 始终查阅 Tailwind CSS 文档以了解最新的高度类和配置选项。
总结
理解 Tailwind CSS 的高度属性的工作方式对于避免卡片塌陷和其他高度相关的问题至关重要。 通过使用预定义的高度类或自定义高度，开发者可以灵活地控制元素的高度，并构建出美观且响应式的用户界面。 记住，掌握 Tailwind CSS 的关键在于理解其实用类方法和配置选项。