How to position a footer with Tailwindcss

I’ve always had problems with the positioning of footers in web pages I try making where I cant make the footer position stay at the bottom of the page when there isn't much content on the page and when there is enough content to fill the browser window the footer should retain its position below the main page content. Credit where credit is due, thanks to Radu for explaining this solution here.

I have however found a great solution to this problem using the Tailwindcss library classes flex flex-col h-screen and mt-auto

Step 1

Wrap the page contents in a container, either a div tag or a semantic html tag and add these tailwindcss class names.

<div className=”flex flex-col h-screen”>
    <!--content -->
</div>

// or

<main className=”flex flex-col h-screen”>
    <!--content -->
</main>

In React components just wrap the return statements in a div like so

function MainPage() {
    return(
        <div className=”flex flex-col h-screen”>
            {*/content */}
        </div>
    )

export default MainPage;

Step 2

This step is simple, just add your main page content in the parent div created in step 1 and give it the class name h-full so that it fills the parent div height (which was assigned h-screen, the screen height)

<div className=”flex flex-col h-screen”>
    <!--main page content below-->
    <div className="h-full">
        <!-- content -->
    </div>
    <div>
</div>

Follow same steps in the react component too

function MainPage() {
    return(
        <div className=”flex flex-col h-screen”>
            {*/main page content below */}
            <div className="h-full">
                {*/content */}
            </div>
        </div>
    )

export default MainPage;

Step 3

Lastly, and our target for this solution is the footer itself. The footer needs but one class to position it at the bottom of the page regardless of the amount of content in the main page content container.

This means that even if we get page content that doesn’t fill the browser window the footer is still at the bottom, and if the page content exceeds the browser window (where scrolling is then applied) the footer will remain at the bottom of the content without overlapping the content.

We do this by giving the footer a mt-auto class which will automatically place extra space in the flex box as margin at the top of the footer and if there is no space (when content is exceeds browser window) it places no margin at the top and footer remains at the bottom.

<div className=”flex flex-col h-screen”>
    <!--main page content below-->
    <div className="h-full">
        <!-- content -->
    </div>
    <div className="mt-auto">
        <!--footer content -->
    </div>
</div>

n a React app we can create the footer as its own component and just place it in every other page content component we want.

The Footer component

function Footer() {
    return(
        <div className=”mt-auto”>
                {*/ footer content */}
        </div>
    )

export default Footer;

The Main page content component

function MainPage() {
    return(
        <div className=”flex flex-col h-screen”>

            {*/main page content below */}
            <div className="h-full">
                {*/content */}
            </div>

            <Footer />
        </div>
    )

export default MainPage;

And there you have it, three easy steps to place a footer at the bottom and make it stay there.

Side Note, mb-auto class added to the div above the footer can also work instead of mt-auto on the footer itself since they both would work with the space between the footer and the main page content.