Tailwind CSS provides the h-screen utility class that makes an element take up 100vh of the user’s display. A downside is that there are no sibling classes with more granular vertical spaces, like 50vh, 33vh, or 25vh.

This tutorial shows you how to use any view height utility class with Tailwind CSS.

Tailwind CSS Series Overview

Using the JIT Compiler

Tailwind CSS migrated to a JIT (just-in-time) compiler starting from version 3.0. Tailwind’s JIT compiler supports a bracket notation to generate and apply custom classes. For example, use max-h-[50vh] as a CSS class to assign a max height of 50vh:

<div class="h-screen max-h-[50vh]">  
  Content
</div>  

This way you can assign any view height of your choice. Sweet!

Extending the Tailwind CSS Configuration With a 50vh Screen Height Class

You can also create a dedicated CSS utility class for 50vh in your tailwind.config.js, like h-screen/2. You’re specifically extending the height h- configuration. To add a new utility class to Tailwind, edit the tailwind.config.js file and extend the default theme:

export default {  
  theme: {
    extend: {
      height: {
        "screen/2": "50vh",
        "screen/3": "calc(100vh / 3)",
        "screen/4": "calc(100vh / 4)",
      },
    },
  },
}

You may configure explicit values, like 50vh or use the CSS calc function to calculate dynamic heights. You’re free to choose the way you like it.

That’s it!