Jim Shannon
Article Tags: All CSS Tailwind
Dec 12, 2017

tailwind-sticky

Create a Sticky Footer Using Tailwind CSS

For this demo we are going to create a "sticky footer" using only HTML and Tailwind CSS utility classes.

A little about Tailwind

Tailwind CSS is a utility-first CSS framework for rapid UI development. It's a collection of highly composable, low-level utility classes that streamline the building of complex user interfaces. All without imposing design decisions that you either don't want or might have to undo later. It's highly customizable and provides the necessary tools for extracting components of often used utility patterns. It's highly responsive and super easy to work with.

It might seem a little odd at first, but the more you use it the more it grows on you. I encourage you to give it a try if you haven't already.

Let's begin with a boilerplate HTML file with some dummy content

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sticky Footer Demo</title>
  </head>
  <body>
    <h1>Sticky Footer Demo</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  </body>
</html>

Which should look like this in your browser

tailwind-sticky

Now let's add Tailwind's latest default configuration build via CDN

We're keeping things simple for this demonstration so we will only bring in the default configuration via CDN.

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">

If you plan on exploring the customization abilities of Tailwind, other installation options exist. See the Tailwind Installation Instructions.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sticky Footer Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Sticky Header Demo</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  </body>
</html>

And we will add a <header>, a <div id="content"> wrapper, a <footer> and some basic utility class styling

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sticky Footer Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
  </head>
  <body>
    <header class="w-full text-center border-b border-grey p-4">
      This is our header
    </header>
    <div id="content" class="container mx-auto p-8">
      <h1 class="mb-4">Sticky Footer Demo</h1>
      <p class="text-justify">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
    <footer class="w-full text-center border-t border-grey  p-4">
      This is our footer
    </footer>
  </body>
</html>

Which results in the following rendered page

boilerplate-with-styling

Now... we will make the footer sticky Tailwind's built in Flex Display

This is how we modify the previous HTML file in order to force the footer to hug the bottom of the page until forced below the viewport by the body content.

Pay close attention to modifications to the <body>, <div id="content"> and <footer> tags.

<!DOCTYPE html>
<html">
  <head>
    <meta charset="UTF-8">
    <title>Sticky Footer Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
  </head>
  <body class="flex flex-col min-h-screen">
    <header class="w-full text-center border-b border-grey p-4">
        This is our header
    </header>
    <div id="content" class="flex-1 container mx-auto p-8">
        <h1 class="mb-4">Sticky Footer Demo</h1>
        <p class="text-justify">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    <footer class="w-full pin-b text-center border-t border-grey p-4">
        This is our footer
    </footer>
  </body>
</html>

What we changed

  1. For the <body> element we added the flex , flex-col and min-h-screen classes
  2. For the <div id="content"> element we added the flex-1 class
  3. For the <footer> element we added the pin-b class

Our final result in action!

Sticky Footer Final Result

Summary

I realize that the concept of a sticky footer is quite basic and there are a number of ways in which it can be executed (flex, grid, negative margin, calc, etc). Flex seems to provide a very well rounded approach and leaves us with a footer that is not fixed in height. Using Tailwind's Flex utilities prove a simple and effective way to achieve this common task.

A big shout out to the team at Tailwind for a great product. Thanks to @adamwathan, @reinink, @davidhemphill, and @steveschoger for making us re-think how we do CSS.

Share: Twitter
Share: Facebook
Feed: Twitter
Follow: Twitter
Contact: Telegram