Using Viewport Height for Div Container in TailwindCSS

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.

Using viewport height in TailwindCSS

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.

Latest articles

Related articles