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

Posted 2023-03-07

【中文标题】如何在 Tailwind 中设置最小高度？

【英文标题】：How can I set min-height in 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>

【问题讨论】：

结帐顺风“JIT（即时）”功能。你可以做一些疯狂的事情，比如 class="h-[1rem]"

谢谢@MinSomai 我会去看看！我认为这将是一个常见的用例，以至于我遗漏了一些东西。这是我使用 Tailwind 的第一个“真正”项目。

我们曾经为任意值的东西编写自定义 css。无论如何，这个新的顺风特性解决了大多数情况。

@MinSomai 刚查了一下，发现在 Tailwind 2.1 中引入了 JIT。不幸的是，这个项目目前使用的是 2.0，我无能为力！

你有两个选项 AFAIK：定义你自己的 min-h-1rem 或 tailwind.config.js 中的东西或编写一个新类。

【参考方案1】：

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

使用 JIT

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

https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode

从 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 之类的内容。

【讨论】：

谢谢！我最终扩展了配置。非常感谢您的示例代码！