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

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 1:
npm init -y
Step 2:npm install tailwindcss
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 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 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  
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:
Picked
Tailwind CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Primer CSS Flexbox Flex Direction
HTML Course | First Web Page | Printing Hello World
Design a web page using HTML and CSS
Search Bar using HTML, CSS and JavaScript
How to wrap the text around an image using HTML and CSS ?
Express.js express.Router() Function
Installation of Node.js on Linux
How to set input type date in dd-mm-yyyy format using HTML ?
Differences between Functional Components and Class Components in React
How to float three div side by side using CSS?