Creating a Flexbox Sticky Footer with Tailwind

David M. Updated Feb 26, 2026

With Tailwind CSS utility classes, making a flexbox sticky footer is easier than ever.

Back in 2016, we wrote a post called Creating a Sticky Footer with Flexbox. Not much has changed since then. If you want to push your footer to the bottom of the browser (regardless of your content size) then this is still one of the better methods. We’re using this technique today.

But if you’re using Tailwind CSS as your front-end framework, this is easier than ever! Before, we had to write custom CSS for multiple elements and/or classes. Now, we can achieve an identical effect with just a few Tailwind utility classes:

<body class="flex flex-col min-h-screen">
    <header>...</header>
    <main class="flex-auto">...</main>
    <footer>...</footer>
</body>

The first two body classes (.flex and .flex-col) turn the body element into a vertical flex container.

.min-h-screen matches the element's height to the user's browser height.

Finally, flex-auto expands the main element to fill the available space, pushing the footer to the bottom of the screen.

Using these utility classes is the same as adding the following CSS to your body and main elements:

body {
    display: flex; // .flex
    flex-direction: column; // .flex-col
    min-height: 100vh; // .min-h-screen
}

main {
    flex: 1 1 auto; // .flex-auto
}

And that's it! If you start your next Tailwind project with this markup, then you’ll never need to worry about your footer riding up on short pages.

You can view a working example of this at Codepen.