Tailwind CSS 最小高度

在前端开发中，经常需要设置元素的最小高度。使用 Tailwind CSS 可以很方便地实现这一功能。

最小高度设置

使用 min-h-{size} 可以设置元素的最小高度，其中 {size} 可以是以下值之一：

• 0：表示最小高度为 0
• full：表示最小高度为 100%
• screen：表示最小高度为屏幕高度（Viewport Height，即视口高度）

同时，{size} 还可以是一组像素值或百分比值，例如 min-h-16 表示最小高度为 16 像素，min-h-50p 表示最小高度为元素父元素高度的50%。

预定义的最小高度类

Tailwind CSS 还提供了一些预定义的最小高度类，可以直接使用，例如：

• min-h-0：表示最小高度为 0
• min-h-full：表示最小高度为 100%
• min-h-screen：表示最小高度为屏幕高度
• min-h-64：表示最小高度为 64 像素
• ...（更多预定义类可查看 Tailwind CSS 的官方文档）

响应式最小高度

通过在最小高度类名中添加断点名称，可以设置响应式的最小高度。例如，min-h-{breakpoint-name}-{size} 表示在屏幕宽度大于等于 {breakpoint-name} 时，元素最小高度为 {size}。

```html
<div class="min-h-16 sm:min-h-24 md:min-h-32 lg:min-h-48 xl:min-h-64">...</div>

上面的代码片段中，元素在屏幕宽度大于等于 640px、768px、1024px、1280px、1536px 时的最小高度分别为 16px、24px、32px、48px、64px。

## 综合实例

最后，我们来看一个综合的例子，它包含了最小高度的基本设置、预定义的最小高度类、以及响应式最小高度的设置。

```markdown
```html
<div class="min-h-0 sm:min-h-24 bg-gray-200">
  <p class="min-h-full">这是一段文本。</p>
  <div class="min-h-screen md:min-h-64 lg:min-h-96 xl:min-h-full bg-gray-400"></div>
</div>

上面的代码片段中，最外层的 `div` 元素需要根据其子元素的高度自适应高度，因此设置最小高度为 0。在屏幕宽度大于等于 640px 时，`div` 元素的最小高度为 24px，背景色为灰色；在屏幕宽度大于等于 1024px 时，内部的 `div` 元素的最小高度为 96px，背景色为深灰色。