We can do width, and there's a number of tailwind values you get out of the box, like 8 or 16 or 32 or 64. So if we set a width of 64 and a height of 64 and give that a refresh, we get a perfect box there. And you can see that's a width of 16 rems and a height of 16 rems. Okay. But now, of course, all of the text is going to rise to the very top portion of the box. Now we've already learned a number of things. For example, here, this wrapper around the heading, yeah, we could set a class of flex, and that will now be left to right.

For example, here, this wrapper around the heading, yeah, we could set a class of flex, and that will now be left to right. We could do flex-column to change the default direction to column. We could then do things like this, where we say flex-1, and that way it will take up all available space. But if we give that a refresh, we don't see it. And that's because right now, if we hover over the div, it's only going to take up as much height as it requires. If you ever want to say, no, I want you to take up the whole height of your container, you can always say h-full.

So now we can say the heading should be at the top, and then everything else should be pushed down. Of course, this doesn't look good. But as we reviewed in the last example, if this section down here were maybe some extra meta buttons or links that you want to click, this is a good use case. Anyways, let's get back to the main example. Perfectly centered text. All right. We'll remove that. And on the container here, we'll once again set a display of flex.

We'll remove that. And on the container here, we'll once again set a display of flex. Now you'll notice it doesn't change it from left to right. And that's because once again, the h3 and the paragraph are wrapped within a div. So they are not directly affected by a display of flex. Let's now say alignItems center. Come back. Give it a refresh. And now it's vertically positioned.

Give it a refresh. And now it's vertically positioned. Let's change this up. Let's do a width of maybe three-fourths of the container. That looks good. Let's adjust the width here. So here I'll say a hard code of width of 64 there. And now if you want to say, okay, this block right here needs to be vertically and horizontally centered. Once again, we could come back and say justify to the center.

Now you'll see everything is wrapped within a div with an ID of root. We have a header that corresponds to this. We have a main section with a bunch of generic paragraphs within it. That's of course this. And then finally, we have a minimal footer. Okay, so let's get started. To begin, we want to tell the root div here, I want your height to be, well, the height of the viewport. Take a look at this. I'll open up Chrome DevTools.

Okay, so let's go ahead and add that. A temporary background color of red, and then, well, you could do height: 100%, but this isn't what you want. height: 100% just means height of 100%, as you can see right there. Instead, we want height: 100vh. This is the tailwind class to set a height of 100% viewport. Okay. Refresh, and there we go. All right, so now we have a height based upon the viewport, which means this is a cinch. This is like every other flex example we've reviewed.

So what we really want to say here is the minimum height is 100% of the viewport height. So if we come back to the very top, we can update this to be min-h-screen. All right, so now, the minimum height, yeah, that's definitely going to be 100% of the viewport, but if it needs to grow beyond that, it certainly can. All right, so these are four or five basic examples, but you know what, they represent so many of the tasks you will do when coding up a design, aligning things, moving this over here and that over there, creating a grid, aligning text, centering things, sticky footers. These are really common examples that are applicable to almost all projects. So if you can, try to commit these techniques to memory.