Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to fill the height of the viewport with tailwind CSS?
Many developers struggle to create elements that fill the full height of the viewport, especially in responsive layouts, because they lack knowledge of using Tailwind CSS utilities. Tailwind CSS ensures responsiveness and user engagement by providing utility-first classes.
What is viewport height?
Viewport Height (vh) is a CSS unit that measures the height of the visible area of a web page in the browser window, excluding any scrollbars or toolbars.
Approaches to fill viewport height
We can fill the height of the viewport in Tailwind CSS using the following approaches:
Using the h-screen CLass
The h-screen utility in Tailwind CSS is an easy way to make an element's height equal to the full height of the viewport (100vh). This Tailwind CSS class is used to set the element's height to 100% of the viewport height.
Syntax
<div class="h-screen">
---
</div>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tailwind CSS h-screen Class</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<div class="h-screen bg-green-600
flex items-center justify-center
flex-col text-white">
<h1 class="text-4xl font-bold">Tutorialspoint</h1>
<h3 class="text-2xl">Example of h-screen class</h3>
</div>
</html>
Output
Using the min-h-screen class
The Tailwind CSS min-h-screen class is another simple way to fill the height of the viewport. The min-h-screen utility is a utility that sets the minimum height of an element to the full height of the viewport. This utility works best when you need to set a fixed minimum height for the viewport.
Syntax
<div class="min-h-screen">
---
</div>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tailwind CSS min-h-screen Class</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<div class="min-h-screen bg-yellow-600
flex items-center justify-center
flex-col text-white">
<h1 class="text-4xl font-bold">
Tutorialspoint
</h1>
<h3 class="text-2xl">
Example of min-h-screen class
</h3>
<!--The min-h-class will set the minimum height
of the viewport to 100vh or full screen-->
</div>
</html>
Output
Customizing Viewport Heights
You can also fill the height of the viewport by making your own custom height settings in the Tailwind configuration file. For example:
module.exports = {
theme: {
extend: {
height: {
'100vh': '100vh',
},
},
},
};
Syntax
<div class="h-100vh "> --- </div>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tailwind CSS h-screen Class</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<div class="h-100vh bg-pink-600
flex items-center justify-center
flex-col text-white">
<h1 class="text-4xl font-bold">
Tutorialspoint
</h1>
<h3 class="text-xl">
Example of Configuring Custom height for filling viewport.
</h3>
</div>
</html>
Output
145 Views
