How to fill the height of the viewport with tailwind CSS ?
Last Updated :
14 Mar, 2023
Tailwind CSS is a popular utility-first CSS framework that makes designing and building responsive websites easier. Filling the height of the viewport with a specific element or container is a common design requirement. This is simple to accomplish with Tailwind CSS, and we will look at various approaches in this article.
Syntax: Before we dive into the various approaches to filling the height of the viewport using Tailwind CSS, let’s first look at the Tailwind styling syntax. Tailwind CSS applies styles to HTML elements by using classes with specific naming conventions. The following is an example of the syntax:
<div class="bg-blue-500 text-white p-4">Hello, world!</div>
In the example above, we have applied the following styles to a div element:
- bg-blue-500: Sets the background color to blue-500.
- text-white: Sets the text color to white.
- p-4: Adds a padding of 4 units to all sides of the element.
Approach 1: Using the ` h-screen ` class: Tailwind CSS includes an h-screen class that sets an element’s height to the height of the screen. We can use this class to fill the viewport’s height with an element.
Syntax:
<div class="h-screen bg-blue-500 text-white p-4">
Hello, world!
</div>
Example 1: Using the h-screen class:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Tailwind CSS Fill viewport height</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="h-screen bg-green-500 text-white p-4">
GeeksforGeeks!
</div>
</body>
</html>
|
Explanation: In this example, we are using the h-screen class provided by Tailwind CSS to fill the height of the viewport with the div element.
The h-screen class sets the height of the element to the height of the screen, which means that the element will expand to fill the height of the viewport. We have applied the bg-green-500, text-white, and p-4 classes to style the element with a blue background color, white text color, and a padding of 4 units on all sides.
By using the h-screen class, we are able to achieve the desired result of filling the height of the viewport with the element without having to do any additional calculations or styling.
Output:
Approach 2: Using the flex class: The flex class can also be used to fill the height of the viewport with an element. We can use the flex class to create a container element with a height of 100vh (100% of the viewport height). Then we can add a child element with the flex-1 class, which will expand to fill the container element’s remaining height.
Syntax:
<div class="flex h-screen">
<div class="flex-1 bg-blue-500 text-white p-4">
Hello, world!
</div>
</div>
In the example above, we have created a container div element with the flex and h-screen classes. This sets its height to 100vh. We have also added a child div element with the flex-1 class, which makes it expand to fill the remaining height of the container. We have applied the bg-blue-500, text-white, and p-4 classes to style the child
Example: Using the flex class
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS - Fill viewport height</title>
<link rel="stylesheet"
href=
</head>
<body>
<div class="flex h-screen">
<div class="flex-1 bg-blue-500
text-white p-4">
GeeksforGeeks
</div>
</div>
</body>
</html>
|
Explanation: In the example above, we have included the Tailwind CSS stylesheet in the head section of the HTML file. We have then created a div element with the flex and h-screen classes and added a child div element with the flex-1 class to fill the remaining height of the container. We have also applied the bg-blue-500, text-white, and p-4 classes to style the child element.
Output:
Conclusion: A common design requirement in web development is to fill the height of the viewport with an element or container. Tailwind CSS offers several approaches to accomplishing this through the use of its utility classes, such as the h-screen and flex classes. You can easily fill the height of the viewport in your own projects by following the examples provided in this article.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...