- Instant help with your CSS coding problems

Fill the full height of the screen in TailwindCSS

How to fill the full height of the screen in TailwindCSS?
<div class="bg-teal-200 h-screen">
    <h1>Lorem ipsum</h1>

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>

The result is not what we want:

Wrong full height solution

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>

Where the result looks like this:

Fill entire height of the screen


Share "How to fill the full height of the screen in TailwindCSS?"
Interesting things
OpanAi's ChatGPT