Open In App
Related Articles

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

Like Article
Save Article
Report issue

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.  


    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=”^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.  


<!DOCTYPE html>
    <meta charset="UTF-8" />
    <link href=
  <body style="height: 1000px">
    <h1 style="color: green; 
               text-align: center">
    <header class="text-2xl text-center 
                   text-green-800 border-b-2 
      Sticky footer using Tailwind CSS
      <p class="p-2 w-9/12">
             text-3xl text-white text-center
             border-t-4 border-red-500
      This is sticky fixed Footer.



Last Updated : 12 May, 2021
Like Article
Save Article
Share your thoughts in the comments
Similar Reads