Impress your clients with modern, stunning, fully customizable website templates • Ad
Since my post on making the footer stay at the bottom of the page with Bootstrap was useful to many, I decided to write a similar tutorial, but for Tailwind CSS.
Making the footer stay at the bottom of the page with Tailwind CSS is similar to Boostrap. The only difference is the naming of the classes.
Let’s check it out.
Make the Footer Stay at the Bottom of the Page with Tailwind CSS
Note that I’m not talking about making the footer fixed or sticky. That’s something else.
Step 1
Add these Tailwind CSS classes to the <body> tag or whatever wrapper you might be using.
flex flex-col min-h-screen
It should look like this:
<body class="flex flex-col min-h-screen">
Step 2
Add this Tailwind CSS class to the <footer> tag or whatever wrapper you might be using.
mt-auto
It should look like this:
<footer class="mt-auto">
Alternative
As an alternative, you can add the grow utility class to your main content wrapper instead of mt-auto in the footer. The grow class adds flex-grow: 1.
It should look like this:
<body class="flex flex-col min-h-screen">
<header>...</header>
<main class="grow">...</main>
<footer>...</footer>
</body>
If the Design Breaks
This solution works. I never had a problem with it, not in Bootstrap or Tailwind CSS.
But if the design breaks, it might be because you:
- Have an incompatible or specal type of layout;
- Have a flaw in the layout.
So, make sure everything’s set properly in your layout.
That’s a Wrap
I hope this post has helped you out.
If you're interested in my web design services or templates, want to collaborate, or just have something to say, feel free to shoot me a message.