Skip to content
Related Articles

Related Articles

Improve Article

How to create fixed/sticky footer on the bottom using Tailwind CSS ?

  • Last Updated : 12 May, 2021

In this article, we are going to create a fixed/sticky footer on the bottom using Tailwind CSS. Tailwind CSS is a highly customizable, utility-first CSS framework from which we can use utility classes to build any design. With Tailwind CSS we can create a design by simply adding classes.  

Installation:

    Method 1: Install Tailwind via npm

  • Step 1:

    npm init -y
  • Step 2:



    npm install tailwindcss
  • Step 3: Now we have to add Tailwind to our CSS by using the @tailwind directive to inject Tailwind’s base, components, and utility styles into our CSS file. 

    @tailwind base;  
    @tailwind components;  
    @tailwind utilities;
  • Step 4: It is an optional step that is used to create a Tailwind config file.

    npx tailwindcss init 
  • Step 5:

    npx tailwindcss build styles.css -o output.css  

Method 2: Using Tailwind via CDN

<link href=”https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css” rel=”stylesheet”>

Example: In the following example, the following classes are used. 

The class bg-{color} is used for the background color of the element. Similarly, p-{size} is used for padding of the element, text-{size} is used for the font size of text, text-center is used to align the text to the center, text-{color} is for the font color of text, border-b-{width} is for the border in the bottom, border-t is for the border at the top, border-{color} is for border color of the element, fixed is for a fixed position of the elements, inset-x-0 is right and left properties of the element, bottom-0 is for the bottom property.  

HTML




<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
          rel="stylesheet"/>
  </head>
  <body style="height: 1000px">
    <h1 style="color: green; 
               text-align: center">
        GeeksforGeeks
    </h1>
    <header class="text-2xl text-center 
                   text-green-800 border-b-2 
                   border-grey-500">
      Sticky footer using Tailwind CSS
    </header>
    <div>
      <p class="p-2 w-9/12">
            
      </p>
    </div>
    <footer
      class="bg-green-700
             text-3xl text-white text-center
             border-t-4 border-red-500
             fixed
             inset-x-0
             bottom-0
             p-4">
      This is sticky fixed Footer.
    </footer>
  </body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :