There are many use cases where you want the viewport height to be the default height of the container. For example, you want the body
tag to have the viewport height or may be you are designing a modal where you need viewport height as the background container.
How to Use Viewport Height for Div Container in TailwindCSS
Let’s assume you are designing a modal in TailwindCSS and you want the background to cover the entire screen of the viewport, you can use the h-screen
class in TailwindCSS. The h-screen
class set the height
of the container to the viewport height. Here is a working code example to use the viewport height and the output is attached as a screenshot.
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="h-screen p-40 flex flex-col bg-gray-700/40 items-center justify-center"> <div class="bg-white p-20"> <h1 class="text-4xl font-semibold">Using Viewport Height in TailwindCSS</h1> <p class="mt-4"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus voluptate quae reprehenderit pariatur, totam explicabo labore, dicta nam iste, facere dolorum corrupti est tenetur et sint vitae officia? Quam, aliquam. </p> </div> </div> |
Conclusion
The h-screen
class lets you use the viewport height as the container height in TailwindCSS. You can use the h-screen
class to set the height of the body
tag or any container element.