Sticky Footer Using Tailwind CSS

3 min readFeb 20, 2018

Tailwind CSS, as I mentioned in my first blog post, is a utility-first CSS framework for rapid UI development. It’s a collection of utility classes that streamlines the building of complex user interfaces. It’s highly customizable and provides the necessary functionality for extracting components of frequently used utility patterns. Yes. it allows you to build responsive designs in the same way as you will build the rest of your designs.

For this demo, we would be creating a “sticky footer” using only HTML and Tailwind CSS. Let’s begin with the HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Sticky Footer Demo</title>
  </head>
  <body>
        <header>
            This is our header
        </header>
        <div id='content'>
            <h1>Sticky Footer Demo</h1>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br />
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br />
            Ut enim ad minim veniam, quis nostrud exercitation ullamco.<br />
            Duis aute irure dolor in reprehenderit in voluptate velit esse. <br />
            Excepteur sint occaecat cupidatat non proident.
            </p>
        </div>
        <footer>
            This is our footer
        </footer>
  </body>
</html>

Above is simple boilerplate HTML with dummy content which would look like this:

Ok, now let’s add Tailwind CSS via the CDN.

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

On adding the above Tailwind CSS in the HTML, our page would still look the same except for some default CSS applied on the <body> and <p> tags.

Let’s add some Tailwind CSS classes to <header>, <div id='content'></div> & <footer>.

<!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='mx-auto p-8'>
            <h1>Sticky Footer Demo</h1>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br />
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br />
            Ut enim ad minim veniam, quis nostrud exercitation ullamco.<br />
            Duis aute irure dolor in reprehenderit in voluptate velit esse. <br />
            Excepteur sint occaecat cupidatat non proident.
            </p>
        </div>
        <footer class='w-full text-center border-t border-grey p-4'>
            This is our footer
        </footer>
  </body>
</html>

That’s how it should look:

So we gave following classes:

p-4 — A padding of 4px to header and footer
w-full — Full screen width
text-center — text aligned center
border-grey — grey colored border
border-t stands for border-top and border-b stands for border-bottom

Above are explanations of few Tailwind CSS classes.

Time for some Tailwind magic. We will make the footer sticky by using flex display.

We will give full height to <html> followed by adding the flex classes to body and <div id='content'>. And last step is to give pin-b class to footer that would absolutely position the footer to the bottom of page.

Final HTML:

Final Result:

If you found this tutorial useful, you know what to do now. Hit that clap button and follow me to get more articles and tutorials on your feed.

Originally published at milanchheda.com on February 20, 2018.

Sticky Footer Using Tailwind CSS

Written by Milan Chheda

Responses (2)