How to fill the height of the viewport with tailwind css

There is a tailwind class named .h-screen that translates to height:100vh; css. This should work as well. For further details please refer to the Official Tailwind documentation

You can add min-h-screen to the parent <div>, this would fill the height of the viewpoint.

And the difference with h-screen is that this will stretch over the screen. It would be helpful when the screen is tiny and the content is overflowing with a scrollbar. In this situation the background will not fill the rest of the scrolled-up part.

 <div class="flex items-stretch bg-grey-lighter min-h-screen">
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

Link to some snippets at tailwind play (added a background color example to clarify it): https://play.tailwindcss.com/8Qd822yY4w