How to fill the height of the viewport with tailwind css

css flexbox tailwind-css
bencarter78 picture bencarter78 · Dec 21, 2017 · Viewed 24.2k times · Source

I'm just trying out Tailwind CSS and want to know how to fill the height of the viewport.

Taking this example HTML from the docs

<div class="flex items-stretch bg-grey-lighter">
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

How do I make it stretch to the bottom of the screen?

Answer

Nitin Jadhav picture Nitin Jadhav · Apr 24, 2018

There is a tailwind class named .h-screen that translates to height:100vh; css. This should work as well. For further details please refer to the Official Tailwind documentation

Related questions

Better way to set distance between flexbox items

To set the minimal distance between flexbox items I'm using margin: 0 5px on .item and margin: 0 -5px on container. For me it seems like a hack, but I can't find any better way to do this. Example

Read More
Flexbox: center horizontally and vertically

How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally. http://codepen.io/anon/pen/zLxBo

Read More
How to align 3 divs (left/center/right) inside another div?

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]] Container div is 100% wide (no set width), and center div should remain in center after resizing the container. So I set: #container{width:100%;} #left{…

Read More