In Tailwind, how to set height of a div to 80% of the screen?

在Tailwind CSS中，您可以通过使用高度工具类来控制元素的高度。要将一个div的高度设置为屏幕的80%，您可以使用h-screen类来设置其高度为视口的100%，然后结合比例大小来调整到80%。

但是，Tailwind CSS 默认并没有提供直接设置为屏幕80%高度的工具类。您需要利用自定义的实用类或使用CSS来实现这一点。下面是两种实现方法：

方法1: 使用 Tailwind 的扩展配置

您可以在tailwind.config.js中扩展高度工具类，添加一个自定义的类，比如h-80screen，来设置元素的高度为屏幕高度的80%。

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      height: {
        '80screen': '80vh'
      }
    }
  }
}

然后，在您的HTML元素中使用这个新创建的类：

html
<div class="h-80screen bg-blue-500">
  这个div的高度是屏幕的80%
</div>

方法2: 使用原生CSS

如果您不想在Tailwind配置中添加自定义类，您可以直接在您的CSS文件中添加一个类：

css
.height-80vh {
  height: 80vh;
}

然后在HTML文件中使用这个类：

html
<div class="height-80vh bg-blue-500">
  这个div的高度是屏幕的80%
</div>

这两种方法都能够有效地将div的高度设置为屏幕的80%，选择哪一种取决于您是否更倾向于使用Tailwind的配置方式来保持一致性，或者更喜欢用传统的CSS方法来进行简单的定制。