Sling Academy
Home/Tailwind CSS/Tailwind CSS: Make a Div 100% Height & Width of the Viewport

Tailwind CSS: Make a Div 100% Height & Width of the Viewport

Last updated: December 15, 2023

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>Sling Academy</title>
</head>

<body>
    <div class="w-screen h-screen bg-amber-500"></div>
</body>

</html>

Screenshot:

That’s it. Happy coding & have a nice day!

Next Article: first-of-type and last-of-type in Tailwind CSS

Previous Article: Tailwind CSS: How to Create Columns with the Same Height

Series: Basic Tailwind CSS Tutorials for Beginners

Tailwind CSS

Related Articles

You May Also Like

  • How to Create Striped Tables with Tailwind CSS
  • Tailwind CSS: Creating Shimmer Loading Placeholder (Skeleton)
  • Tailwind CSS: How to Create Parallax Scrolling Effect
  • How to Style Lists in Tailwind CSS
  • Text Underline in Tailwind CSS
  • How to Change Mouse Cursor in Tailwind CSS
  • Form Validation with Tailwind CSS (without Javascript)
  • first-of-type and last-of-type in Tailwind CSS
  • Tailwind CSS: Create a User Card with Circle Avatar
  • Tailwind CSS: How to Create Columns with the Same Height
  • How to Style Placeholder Text with Tailwind CSS
  • Using :not() selector in Tailwind CSS
  • Tailwind CSS: How to Create a Stepper
  • Using ::before and ::after in Tailwind CSS
  • Tailwind CSS: How to Create a Vertical Divider Line
  • How to Create Pill Buttons with Tailwind CSS
  • Tailwind CSS: How to Disable Text Selection
  • Tailwind CSS: How to Disable Resizing of Textarea
  • Tailwind CSS: Expand a Text Input on Focus (without Javascript)