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
You can add justify-between to the body tag instead of mt-auto to the footer.
The thing with adding justify-between is that you might notice a bit of a shift in the content. It’s not easily detected unless you:
- Have the same layout for your pages;
- Use this solution only for specific pages;
- Switch between a page that has the classes and one that doesn’t.
For example, for my Hugo blog, I only added these Tailwind CSS classes for the pages where the content is thin.
I did it like this:
<body class="{{- if eq .RelPermalink $tagTermSlug "/contact/" "/tags/"}} flex flex-col min-h-screen justify-between {{- end }}">
I made the classes show only in the body tag of the Contact and Tags pages.
But when I switched to a page that didn’t have the classes, I noticed a slight content shift because of the justify-between class.
So, I removed that class and opted for mt-auto in the footer.
Summary
These are the classes I’m using to make the footer stay at the bottom of the page with Tailwind CSS when the content is thin.
<body class="flex flex-col min-h-screen">
<footer class="mt-auto">
You can check this by viewing the source code of my Contact and Tags pages.
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 a special (or weird 😃) type of layout;
- Have a flaw in the layout.
For example, I forgot to add width: 100% to my nav bar, which is normally done. Thus, when I added the above code, my menu items got pulled together in the center.
So, make sure everything’s set properly in your layout.
That’s a Wrap
I hope that you found this tutorial helpful.
If some info is outdated or incorrect, or you have anything to add, say or ask, please contact me via Twitter or email.