Jan 16, 2022
Per Djurner

Sticky footers using Tailwind

Creating a footer that sticks to the bottom of the page is fairly easy when using Tailwind (and to be fair, it's not too hard with plain old CSS either).

You can use something like the code outlined below.

<body class="flex flex-col min-h-screen">
  <header>
    Header content...
  </header>
  <main class="flex-grow pb-12">
    Main content...
  </main>
  <footer>
    Footer content...
  </footer>
</body>

That will set the body to always be at least the height of the viewport and the main element to fill the available space height wise (using Flexbox).

The bottom padding on the main element is optional, but it's probably something you want to have in order to create some space in the layout before the footer comes.

If you want the footer to actually stick to the bottom of the screen as well (i.e. always be visible regardless of how tall the main content area is), then add sticky and bottom-0 to the footer element.

Home