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> 