Fill the full height of the screen in TailwindCSS

<div class="bg-teal-200 h-screen">
    <h1>Lorem ipsum</h1>
</div>

By default, the height of a div container will be the height needed for the internal content. Even setting the height to 100% and the flex-grow property in the case of a flex container does not change this:

<div class="bg-teal-200 flex flex-grow h-full">
    <h1>This doesn't work</h1>
</div>

The result is not what we want:

The solution is to set the height to 100% of the viewport using the h-screen class:

<div class="bg-teal-200 h-screen">
    <h1>Real 100% height</h1>
</div>

Where the result looks like this: