Tailwind CSS: Make a Div 100% Height & Width of the Viewport
In Tailwind CSS, you can make a div element fill the width and height of the viewport by using the w-screen and h-screen utilities, respectively. This is equivalent to setting the width and height of the div element to 100vw and 100vh in pure CSS.
Example:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>KindaCode.com</title>
</head>
<body>
<div class="w-screen h-screen bg-amber-500"></div>
</body>
</html>Screenshot:
Further reading:
- Tailwind CSS: How to Create Gradient Text
- How to Create Circle Buttons with Tailwind CSS
- Tailwind CSS: Create a Button with Gradient Background
- Tailwind CSS: Center an Element inside a Div
- CSS: Styling Scrollbar Example
- CSS @keyframes Examples
You can also check out our CSS category page for the latest tutorials and examples.
Subscribe
0 Comments
You May Also Like
