css - 如何在 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 way”？

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

Answer 1

有两种方法可以做到这一点:使用新的即时模式或扩展配置。
使用即时通讯
JIT(及时)模式会根据您的需要生成 CSS。因此，它不是生成所有类然后清除未使用的类，而是仅在您使用它们时生成实用程序。这意味着它的速度非常快，并且可用于动态创建任意类。
https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode
从 TailwindCSS v3 开始，just-in-time 模式将默认关闭。
如果启用 JIT，则可以使用这些类:

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

括号表示这是一个不在配置中的任意值。
扩展配置
您还可以通过扩展配置将所有间距值添加到 min-height 实用程序。请注意，通过扩展主题，我们不会覆盖 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 .