【问题标题】：How can I set min-height in Tailwind?如何在 Tailwind 中设置最小高度？
【发布时间】：2021-08-26 19:26:50
【问题描述】：

我有一个内联块，它应该至少 1 rem 高，但如果内容不合适，它会扩展。如果没有 Tailwind，我会通过以下方式解决。

<div style="display:inline-block; min-height:1rem;">
    content...
</div>

但是，Tailwind 提供的唯一 min-h 类是 min-h-0、min-h-full 和 min-h-screen。那么我应该在此处添加哪个类来编写“顺风方式”？

<div class="inline-block ???">
    content...
</div>

【问题讨论】：

【解决方案1】：

有两种方法可以做到这一点：使用新的即时模式或扩展配置。

使用 JIT

JIT（即时）模式会根据您的需要生成 CSS。因此，它不会生成所有类然后清除未使用的类，而是仅在您使用它们时生成实用程序。这意味着它的速度非常快，并且可以用于动态创建任意类。

从 TailwindCSS v3 开始，即时模式将默认关闭。

如果启用 JIT，则可以使用这些类：

<div class="inline-block min-h-[1rem]">
    content...
</div>

括号表示这是一个不在配置中的任意值。

扩展配置

您还可以通过扩展配置将所有间距值添加到最小高度实用程序。请注意，通过扩展主题，我们不会覆盖 min-height 的任何先前值。我们只是在添加新的实用程序。

module.exports = {
  theme: {
    extend: {
      minHeight: (theme) => ({
        ...theme('spacing'),
      }),
    }
  },
}

这意味着您可以像使用普通高度实用程序一样使用min-h-4。

<div class="inline-block min-h-4">
    content...
</div>

就个人而言，我实际上同时使用 JIT 和配置扩展。这意味着我可以根据需要使用任意值，但我也可以将正常的 CSS 间距值用于 min-height 之类的内容。

【讨论】：