如何在 Tailwind 中设置最小高度？

Question

我有一个内联块，它的高度至少应为 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。那么我应该在这里添加哪个类来以“Tailwind 方式”编写它？

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

Answer 1

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

使用JIT

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

从 TailwindCSS v3 开始，默认开启 just-in-time 模式。

如果启用 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.