How to implement a sticky footer with Tailwind CSS and flex.

It is common to implement a footer. However, implementing a footer flush to the bottom of the page can be a pain. In this guide we will go over an implementation leveraging flex layouts to achieve this common sticky footer layout with Tailwind CSS.

Answer:

You can simply use the below code to achieve the desired effect.

<div class="flex flex-col min-h-screen justify-between">
  <header class="h-10 bg-red-500">Header</header>
  <main class="mb-auto h-10 bg-green-500">Content</main>
  <footer class="h-10 bg-blue-500">Footer</footer>
</div>

Explanation:

Lets break down how this works:

<div class="flex flex-col min-h-screen justify-between"></div>

Firstly, by using flex flex-col we ensure the inner contents are laid out vertically. Secondly, the min-h-screen ensures the height of this wrapper will always fill the screen.

<header class="h-10 bg-red-500">Header</header>
<main class="mb-auto h-10 bg-green-500">Content</main>
<footer class="h-10 bg-blue-500">Footer</footer>

Finally, by using mb-auto on the nain element we force the footer to be pushed to the bottom of the container div. If you wish to center the page content, use m-auto or my-auto instead. The trick is in the combination with the min height of the container element. By performing this simple trick, we ensure the footer will be pushed to the bottom of the page when the page content does not fill the screen, but will move lower then main content needs to push it off the screen.