When you're just starting out on a new page, the first thing you want to tackle is the page's layout. This is where everything on your page will live: its navbar, the main content, and the footer.
Let's take a look at a very basic HTML layout using TailwindCSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
WIP Navbar
</nav>
</header>
<main>
WIP main content
</main>
<footer>
WIP footer
</footer>
</body>
</html>
P.S. if you're unfamiliar withmain,header, orfooter, then checkout the previous tip!
Looks like we have a good start, but there's one issue, it looks like the footer element isn't actually at the very bottom of the page like we expect it to be:
To fix this, we'll use flex columns. Flex columns are great because its super easy to add heights to them and have them behave the way we want them to thanks to their ability to grow and shrink.
Let's go ahead and add the following utilities to our body tag:
min-h-screen flex flex-colThen, on our main tag, throw a flex flex-col flex-1
The final code should look like this:
<div class="p-6 min-h-screen flex flex-col">
<header>
<nav>
WIP Navbar
</nav>
</header>
<main class="flex flex-col flex-1">
WIP main content
</main>
<footer>
WIP footer
</footer>
</div>
Boom! Just like that, the footer will always stay at the bottom of the page!
Grab the code for this tip here.
P.S. in Tailwind Play you can't add styles to abodytag so I subbed it out for a regulardiv.
