How to Create a React Sticky Footer / Navbar in TailwindCSS

Hello, hustlers! In this tutorial, you'll learn how to create a sticky footer using Tailwind CSS. This will always stick to the bottom of the screen. 

Here's the final output of what we'll be making today.

1. Set up NextJS project for react. NextJS is one of the recommended frameworks by the React team. I prefer to use it in most of my tutorials
2. Install Tailwind CSS in NextJS
3. Create <StickyFooter/> component

To speed up this tutorial, I created a NextJS starter template with TailwindCSS already pre-installed. Just run the following command to set up the project:

Once done, you can run the following commands to start the local dev server:

If you're on an existing NextJS project, you can install TailwindCSS by following my previous tutorial: How to Set Up NextJS and TailwindCSS in 2023.

If you're using another framework, you can check out other framework installation guides in the tailwind docs.

The main thing here is to install TailwindCSS for a react framework.

Let's create the sticky footer component. There are basically two ways to make stuff sticky using CSS. First is the position:fixed property, and the other is position:sticky. We'll explore both techniques, although the position:fixed technique is easier since it doesn't depend on the layout of the parent component. 

Let's explore the first technique. First, create the file components/FixedFooter.tsx.

The explanation for classes:

1. fixed - grants position:fixed property
2. bottom-0 - grants bottom:0px property. Basically, these two classes will make your footer stick to the bottom. The other two are to make sure that there are no visual bugs.
   
3. bg-indgo-500 - set background-color so that it won't be transparent
   
4. z-50 - sets z-index to 50 so that it's on top of everything
   

You can use this component on any page like so:

Output:

The first technique already encompasses 90% of the use cases, but what's the advantage of using position:sticky? 

The advantage of using position:sticky is that you can have a sticky footer for any container. We'll show this on the output later on. 

First, create the file components/StickyFooter.tsx.

Explanation:

Same as before but we just replaced the following classes `fixed w-screen` with `sticky w-full`. These are the only classes we need for this component but when using the sticky class, we must set up the parent element properly.

If we use the component below, and expect it to work like normal. This won't be the case:

Output:

We can see that the sticky footer component is not placed at the bottom. This is because the parent element's height does not take up the whole screen and it doesn't have the relative class.

Let's modify our parent element like so:

Explanation:

We added "relative min-h-screen flex flex-col" classes and for the sibling element, we added "flex-grow"  so that it takes up the whole screen height. The output after this will be like so:

As I said before, using position:sticky can be advantageous if you want to use the sticky footer in another element. For example:

Explanation:

We attached the sticky footer in another element with a fixed height. 

Here's the output:

That's basically it!

The full code is available at GitHub: jmarioste/react-sticky-footer-tutorial.

You can play with the demo on Stackblitz: React Sticky Footer Tutorial. Make sure you navigate to /index page for fixed:position implementation and to /sticky page for position:sticky implementation.

You learned how to implement a react-sticky-footer by using TailwindCSS classes. If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on Twitter.