Demo Code


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:

http://milanchheda.com/uploads/original.png
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.

http://milanchheda.com/uploads/only-added-tailwind-via-cdn.png

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:

http://milanchheda.com/uploads/some-css-classes.png

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:

<!DOCTYPE html>
<html class='h-full'>
  <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 h-full'>
        <header>
            This is our header
        </header>
        <div id='content' class='flex-1 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 pin-b'>
            This is our footer
        </footer>
  </body>
</html>


Final Result:

http://milanchheda.com/uploads/final-result.gif