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 =
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...