There are four specific elements we need to target, to create a "sticky" footer with TailwindCSS:

  1. the html tag
  2. the body tag
  3. the main content area (or tag)
  4. the footer content area (or tag)

So, assuming we have a page structured with the following markup:

<html>
  <head>

  </head>

  <body>
    <main>

    </main>

    <footer>

    </footer>
  </body>
</html>

Add TailwindCSS classes as indicated below:

<html class="h-full">
  <head>

  </head>

  <body class="flex flex-col h-full"> 
    <main class="flex-1">

    </main>

    <footer class="bottom-0">

    </footer>
  </body>
</html>

That's it. You now have a sticky footer at the bottom of the page.

Try it yourself on CodePen:

See the Pen Sticky Footer with TailwindCSS by Mario Rodriguez (@mariordev) on CodePen.