Using h-screen to Set Hight as Viewport

We can use h-screen to set the height of the element as viewport.

Version

TailwindCSS 3.0

h-screen

height000

The height is stretched to the viewport.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <img class="h-screen" src="https://picsum.photos/640/480/?random=10">
</body>
</html>

Line 10

<img class="h-screen" src="https://picsum.photos/640/480/?random=10">

h-screen : height is the same as viewport

Conclusion

h-full is height: 100%, whereas h-screen is height: 100vh

Reference

TailwindCSS, Height