DEV Community

Cover image for Sticky Footer using Tailwind CSS
Timothy Koech
Timothy Koech

Posted on • Updated on • Originally published at timkoech.co.ke

Sticky Footer using Tailwind CSS

I started experimenting with Tailwind CSS a couple of months ago and I'm loving it. The idea is to finally use Tailwind CSS on my website.

Normally, I like to have my HTML page layout semantically divided into these sections; header, main and footer.

<body>
  <header>
    Navigation bar
  </header>
  <main>
    Page content
  </main>
  <footer>
    Social links
  </footer>
</body>
Enter fullscreen mode Exit fullscreen mode

To keep the footer section at the bottom of the browser window, we need to add flexbox utility classes provided by Tailwind CSS like this.

<body class="flex flex-col min-h-screen ">
  <header>
    Navigation bar
  </header>
  <main class="flex-grow">
    Page content
  </main>
  <footer>
    Social links
  </footer>
</body>
Enter fullscreen mode Exit fullscreen mode

The utility classes

  1. .flex
    This sets the body element into a flex container. All direct children of the body element will become flex-items.

  2. .flex-col
    This defines the direction of the flex-items; header, main and footer.
    We want the layout of the page to resemble a column where the flex-items are arranged from top to bottom.
    By default, flexbox arranges flex-items horizontally in a row from left to right.

  3. .min-h-screen
    This class ensures the layout takes up the full height of the browser window.

  4. .flex-grow
    Adding this class to main makes it grow, occupying all the available space on the screen. The available space is equal to the size of the flex container, body, minus the sum of the flex-items header and footer.

To stick the footer at the bottom using plain CSS and flexbox.

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1; /* Or flex-grow: 1;*/
}
Enter fullscreen mode Exit fullscreen mode

Resources

A Complete Guide to Flexbox

Tailwind CSS Documentation

Flex-grow - MDN Documentation

Top comments (11)

Collapse
 
alihvs profile image
Ali Havasi • Edited

Thanks a bunch!

This method works if you want to push your footer to the bottom of the page. But once the content gets taller than the height of the container, the footer will also be pushed down.
Adding fixed bottom-0 w-full utility classes to the footer works, but the problem is I can't get the z-index working properly for some reason. Any idea what I'm doing wrong?

Collapse
 
dmwyatt profile image
Dustin Wyatt

This is not a sticky footer and yet it's the first Google result for "tailwind sticky footer". 🙄

This is just a regular ole' footer. If the content in main is taller than the screen the footer does not stick to the screen/window bottom.

Collapse
 
unohuim profile image
unohuim

Thanks!

What do you suggest when the top nav menu drop down drops below the footer bar, and when you scroll down to read the rest of the menu drop down, that footer bar gets stuck at the specific place vertically on the screen and doesn't move to the bottom?

Collapse
 
lunaceee profile image
Luna Yu

This is super helpful. Curious if you've tried it with CSS grid?

Collapse
 
soullivaneuh profile image
Sullivan SENECHAL

Simple, clear, thanks for that!

Collapse
 
timosville profile image
Timothy Koech

Thank you.

Collapse
 
jamesapollodev profile image
jamesapollodev

The footer hangs when the content is taller than the screen height especially in small screens

Collapse
 
sethburtonhall profile image
Seth Hall

Yes! Thanks. Love Tailwind!!

Collapse
 
ninjasoards profile image
David Y Soards

rarely needs this anymore, but when I do I always forget how. this works great!

Collapse
 
brandonbyr4 profile image
Brandon

Thank you a bunch! Works perfect wrapping my _app.tsx file with this.

Collapse
 
oasistomato profile image
Simone Arena

thanks bro. I am a python dev and I hate the web FE staff :D sorry to say that. you made my day with this tip