How to set height of a div to 80% of the screen in TailwindCSS?

In Tailwind CSS, you can control the height of elements using height utility classes. To set a div's height to 80% of the screen, use the h-screen class to set its height to 100% of the viewport, then adjust it to 80% using relative units.

However, Tailwind CSS does not provide a direct utility class for setting an element's height to 80% of the screen. You need to utilize custom utility classes or use CSS to achieve this. Here are two implementation methods:

Method 1: Using Tailwind's Extended Configuration

Extend the height utility classes in tailwind.config.js to add a custom class, such as h-80screen, for setting the element's height to 80% of the screen height.

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

Then, apply this new class in your HTML element:

html
<div class="h-80screen bg-blue-500">
  This div's height is 80% of the screen
</div>

Method 2: Using Native CSS

If you prefer not to add custom classes in Tailwind's configuration, directly add a class in your CSS file:

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

Then, use this class in your HTML file:

html
<div class="height-80vh bg-blue-500">
  This div's height is 80% of the screen
</div>

Both methods effectively set the div's height to 80% of the screen. The choice depends on whether you prefer Tailwind's configuration for consistency or traditional CSS for simple customization.