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.