#TailwindCSS

How to Make Footer Stay at Bottom of Page with Tailwind CSS

by Radu

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

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:

  1. Have the same layout for your pages;
  2. Use this solution only for specific pages;
  3. 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.

About Radu

I've been working online, from home, for over 9 years. I learned a lot of different stuff related to websites. My main expertise was WordPress, but for some time, we parted ways, and I started focusing more on web development.